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. Java数据结构-线性表之顺序表ArrayList

    线性表的顺序存储结构.也称为顺序表.指用一段连续的存储单元依次存储线性表中的数据元素. 依据顺序表的特性,我们用数组来实现顺序表,以下是我通过数组实现的Java版本号的顺序表. package com ...

  2. 从xhr说起

    原生xhr对象存在较多的兼容性,IE6及之前版本使用ActiveXObject对象来创建,IE7以后使用兼容版本的MSXML2.XMLHttp.MSXML2.XMLHttp3.0.MSXML2.XML ...

  3. apple-touch-icon-precomposed 和 apple-touch-icon属性区别

    苹果safari浏览器当中apple-touch-icon-precomposed 和 apple-touch-icon属性是有区别的,之前在网上查了下相关的资料和苹果的开发文档手册,对这两中属性区别 ...

  4. Java 学习 day07

    01-面向对象(继承-概述).avi package myFirstCode; /* 将学生和工人的共性描述提取出来,单独进行描述, 只要让学生和工人与单独描述的这个类有关系,就可以了. 继承: 1. ...

  5. mysql存储过程之事务篇

    mysql存储过程之事务篇 事务的四大特征: ACID:Atomic(原子性).Consistent(一致性).Isolated(独立性).Durable (持久性) MySQL的事务支持不是绑定在M ...

  6. 解决 SVN版本冲突

    链接:http://blog.csdn.net/windone0109/article/details/4857044 版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtun ...

  7. less (css预处理)

    用法 1. 必须在head内 2. 样式文件必须先加载 <head> <meta charset='utf-8'> <link rel="stylesheet/ ...

  8. Linux中假设系统丢失了ls命令

    假设系统丢失了ls命令,如何修复: 1.查询ls命令属于那个rpm包[root@localhost ~]# rpm -qf /bin/lscoreutils-8.4-43.el6.x86_64 2.挂 ...

  9. Linux安装过程记录信息

    全新的linux安装完成后,会在root目录下有一下三个文件,记录了Linux的安装细节 anaconda-ks.cfg 以Kickstart配置文件的格式记录安装过程中设置的选项信息 install ...

  10. Yii2 如何更好的在页面注入CSS

    首先 先添加一个widgets,代码如下(提示:使用时注意修改命名空间) <?php /** * User: yiqing * Date: 2014/12/15 * Time: 0:21 */ ...