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. PHP新手必学之刚进公司装环境

    由于今天去一家公司做项目,又重新的装了一遍所熟悉的PHP环境,所以记录下来,总结下. PHP环境主要: PHPstudy(apache+mysql+php)+phpstorm+navicate 解释: ...

  2. Android Studio报Error:Execution failed for task &#39;:Companion:preDexDebug&#39;.

    错误例如以下: Error:Execution failed for task ':Companion:preDexDebug'. > com.android.ide.common.proces ...

  3. 首页底部菜单FragmentTabHost的使用

    一般现在的菜单都是底部FragmentTabHost,切换Fragment来实现的,今天我们就使用这个来看看如何实现的 首先是布局文件 <?xml version="1.0" ...

  4. 摇一摇js代码

    init(); var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = ...

  5. Java语言实现简单FTP软件------>本地文件管理模块的实现(九)

    首先看一下界面: 1.本地文件列表的显示功能 将本地的当前目录下所有文件显示出来,并显示文件的属性包括文件名.大小.日期.通过javax.swing.JTable()来显示具体的数据.更改当前文件目录 ...

  6. CI 框架下执行CLI(命令行)

    1.可以按照Ci官方文件的指导来进行操作 让我们先创建一个简单的控制器,打开你的文本编辑器,新建一个文件并命名为 Tools.php,然后输入如下的代码: <?php class Tools e ...

  7. rails member collection

    resources :theses do resources :document do get :download, :on => :member end end <a class=&qu ...

  8. weak 的内部实现原理

    问题 weak 变量在引用计数为0时,会被自动设置成 nil,这个特性是如何实现的? 答案 在 Friday QA 上,有一期专门介绍 weak 的实现原理.https://mikeash.com/p ...

  9. Yii2数据库操作的各种写法

    -------------------------------ActiveRecord---------------------------------------- 查询: // find the ...

  10. 财经世界(5)国际货币基金组织,世界银行,国际清算银行(BIS)与美联储

    (1)国际货币基金组织 *国际货币基金组织(International Monetary Fund,简称:IMF)是根据1944年7月在布雷顿森林会议签订的<国际货币基金协定>,于1945 ...