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. C# 代码 手工 配置 Log4Net 2种方法

    这个初始化要在 获取 ILog 接口的代码之前完成, 之后按通常方式使用 log4net 就行了. 不用携带 config 配置文件. 方法1: /// <summary> /// 使用文 ...

  2. ios json结构

    NSString *itemJson = [NSString stringWithFormat:@"{\"Id\":\"%@\",\"Cha ...

  3. Collect More Jewels(hdu1044)(BFS+DFS)

    Collect More Jewels Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  4. iptables的扩展,layer7实现

    l7filter:介绍 能过滤7层协议,例如过滤QQ.迅雷 原版只支持2.6.28,不支持centos6的2.6.32:马哥的版本支持2.6.32 实现l7filter: 给内核(netfilter) ...

  5. debian安装oracle jdk

    1 去官网下载linux jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  6. 区分Web前端和后端(转载)

    转载自:http://blog.csdn.net/rosetta/article/details/53871766 前言   做C开发将近六年,基本上没有接触过web相关的东西,原来听别人说web相关 ...

  7. python cookbook第三版学习笔记十七:委托属性

    我们想在访问实例的属性时能够将其委托到一个内部持有的对象上,这经常用到代理机制上 class A:     def spam(self,x):         print("class_A: ...

  8. Module 'curl' already loaded in Unknown on line 0

    Module 'curl' already loaded in Unknown on line 0 应该是php binary已经包含curl,你又动态加载了一遍.屏蔽掉你的extension 引用, ...

  9. JVM性能优化, Part 5 Java的伸缩性

    很多程序员在解决JVM性能问题的时候,花开了很多时间去调优应用程序级别的性能瓶颈,当你读完这本系列文章之后你会发现我可能更加系统地看待这类的问题.我说过JVM的自身技术限制了Java企业级应用的伸缩性 ...

  10. linux 基础-变量,shell基本语法

    变量 定义变量 your_name="runoob.com" #变量名和等号之间不能有空格 使用变量 your_name="qinjx" echo $your_ ...