css代码

.black {
filter: brightness(0);
}
.white {
filter: brightness(100);
}

html代码

<h4>原图</h4>
<p><img src="./xin.svg"></p>
<h4>变成黑色或白色</h4>
<p>黑色:<img src="./xin.svg" class="black"></p>
<p>白色:<img src="./xin.svg" class="white"></p>

css彩色 变黑白(灰)

css代码

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

CSS让图标变成白色或黑色实例页面 和css变灰色的更多相关文章

  1. CSS Paint API绘制透明格子背景实例页面

    CSS代码: .box { width: 180px; height: 180px; background: paint(transparent-grid); } HTML代码: <div cl ...

  2. CSS:绝对定位布局案例 position布局实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  4. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  5. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

  6. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  8. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  9. 我的页面定制CSS代码(SimpleGamboge皮肤)

    我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...

随机推荐

  1. python学习 03 函数 (只会执行一次return就不会往下执行)

    1.调用函数只会执行一次return,而且执行return后不会往下执行

  2. web开发之html5---html5 动画特效舞动的雨伞

    http://www.cnblogs.com/stoneniqiu/p/4199294.html

  3. eclipse 连接 hadoop集群

    1 网上找插件 或者 自己编译 放到eclipse plugin里面 2 重启eclipse 配置MapReduceLocation 通吃端口为9001 9000 看你自己的配置 3 新建mapRed ...

  4. 统计输入的单词中有几个长度大于n的,n是自己指定的,用函数对象实现

    #ifndef COUNT_WORD_H #define COUNT_WORD_H #include <string.h> #include <iostream> #inclu ...

  5. hdu4063(圆与圆交+线段与圆交+最短路)

    写几何题总是提心吊胆.精度问题真心吓人. 其实思路挺简单的一道题,真是什么算法和几何double搞到一块,心里就虚虚的. 思路:求出所有圆之间的交点,然后用这些交点跑一遍最短路就可以了. Aircra ...

  6. task19-21

    [说明]理想是丰满的,现实很骨感,昨天还说今天有望干掉5个小任务,看来是没可能了,兜兜转转地做了一天也才完成下面的这些 一:今日完成 19.学习Spring,配置Spring和Junit 1)先安装一 ...

  7. linux集群管理

    本文以ubuntu-16.04.3-server-amd64为例,搭建服务器集群.同样是依托于虚拟机. 创建第一个节点 创建新的虚拟机参见:创建新的虚拟机,创建之后,编辑虚拟机,选择Ubuntu镜像, ...

  8. 基于flask的web微信

    web微信 1.扫码获取头像 当你打开web微信的时候,因为http是无状态的,web微信如何实时的获取用户的扫码动作? 那么这里用到的是长轮询的方式. from flask import Flask ...

  9. unix网络编程笔记(二)

    第四章笔记 1. 基本Tcpclient/server程序的套接字函数 2. socket函数: int socket(int family,int type,int protocol); (1)so ...

  10. centos 安装 jdk PostgreSQL

    1.下载: anzhuang  jDK http://blog.csdn.net/youzhouliu/article/details/51183115 ----------------------- ...