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. ASP.NET动态网站制作(23)-- ADO.NET(2)

    前言:这节课老师请高级班的E老师过来代课,还是接着老师讲的内容继续深入,修改了上节课老师写的部分代码. 内容: 1.数据库本质就是一个软件,这个软件帮助我们把数据有序地存储起来,当我们需要数据的时候帮 ...

  2. 写shader注意的一些报错

    1.Shader warning in 'Custom/1': Both vertex and fragment programs must be present in a CGPROGRAM. Ex ...

  3. 【BZOJ4537】[Hnoi2016]最小公倍数 分块

    [BZOJ4537][Hnoi2016]最小公倍数 Description 给定一张N个顶点M条边的无向图(顶点编号为1,2,…,n),每条边上带有权值.所有权值都可以分解成2^a*3^b的形式.现在 ...

  4. 【BZOJ4542】[Hnoi2016]大数 莫队

    [BZOJ4542][Hnoi2016]大数 Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个 ...

  5. CAFFE学习笔记(四)将自己的jpg数据转成lmdb格式

    1 引言 1-1 以example_mnist为例,如何加载属于自己的测试集? 首先抛出一个问题:在example_mnist这个例子中,测试集是人家给好了的.那么如果我们想自己试着手写几个数字然后验 ...

  6. POJ 1518 A Round Peg in a Ground Hole【计算几何=_=你值得一虐】

    链接: http://poj.org/problem?id=1584 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...

  7. 九度OJ 1345:XXX定律之画X (递归)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:361 解决:157 题目描述: 给你一个n,然后让你输出F(n) 规则是这样的,F(n)的输出结果是: F(n-1)     F(n-1) ...

  8. React-Native 安装改变镜像

    3.安装完node后建议设置npm镜像以加速后面的过程,否则后面插件安装巨慢 npm config set registry https://registry.npm.taobao.org --glo ...

  9. SQLServer将一个表内指定列的所有值插入另一个表

    insert into records_resolve_bak(resolve_save_addr,resolve_time,resolve_status) select  resolve_save_ ...

  10. 我的Android进阶之旅------>如何将Activity变为半透明的对话框?

    我的Android进阶之旅------>如何将Activity变为半透明的对话框?可以从两个方面来考虑:对话框和半透明. 在定义Activity时指定Theme.Dialog主题就可以将Acti ...