CSS让图标变成白色或黑色实例页面 和css变灰色
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变灰色的更多相关文章
- CSS Paint API绘制透明格子背景实例页面
CSS代码: .box { width: 180px; height: 180px; background: paint(transparent-grid); } HTML代码: <div cl ...
- CSS:绝对定位布局案例 position布局实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- Css - 字体图标
Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...
- css字体图标的制作和使用。
css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...
- css 小图标 & iconfont 字体图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- CSS Sprite 图标
HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- 我的页面定制CSS代码(SimpleGamboge皮肤)
我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...
随机推荐
- linux VI模式下批量修改文件内容
1. :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky 2. ...
- leetCode 57.Insert Interval (插入区间) 解题思路和方法
Insert Interval Given a set of non-overlapping intervals, insert a new interval into the intervals ...
- 【BZOJ3230】相似子串 后缀数组+二分+RMQ
[BZOJ3230]相似子串 Description Input 输入第1行,包含3个整数N,Q.Q代表询问组数.第2行是字符串S.接下来Q行,每行两个整数i和j.(1≤i≤j). Output 输出 ...
- ubuntu14.04 desktop 32-bit kvm装windows xp
经过这几天来的折腾,总算是在ubuntu14.04用kvm装上了xp, 看不少的的贴,也绕了不少的圈,总的来说,非常感谢CSDN上的"上善若水75",看着他写的一个分类" ...
- docker安装并配置加速
安装 旧版本的 Docker 称为 docker 或者 docker-engine,使用以下命令卸载旧版本: sudo apt-get remove docker \ docker-engine \ ...
- android菜鸟学习笔记23----ContentProvider(三)利用内置ContentProvider监听短信及查看联系人
要使用一个ContentProvider,必须要知道的是它所能匹配的Uri及其数据存储的表的结构. 首先想办法找到访问短信及联系人数据的ContentProvider能接受的Uri: 到github上 ...
- WCF基础之序列化
wcf是基于消息进行通信的,这篇就是简单说下序列化引擎是如何将.net object转化为xml消息.一般情况下很少用到这些,你只需定义数据协定之类的或者指定相应的序列化引擎,然后设置相应的特性就好. ...
- Numerical Differentiation 数值微分
zh.wikipedia.org/wiki/數值微分 数值微分是数值方法中的名词,是用函数的值及其他已知资讯来估计一函数导数的算法. http://mathworld.wolfram.com/Nume ...
- CXF生成client注意事项
1. 在使用wsdl2java命令生成client文件时在Service的Java文件中面出现super构造错误,这是因为jax-ws2.2规约与java6冲突 故须要减少jax-ws规约版本号. ...
- 项目中对模板和js,css文件进行压缩的处理类
我们知道,在html的页面中,所有空格和换行符其实都会占据一定的空间,即使使用了gzip压缩,在传输过程中依然会浪费用户的流量和我们自己服务器的带宽,此脚本就是为了解决这个问题而诞生的. 请自行下载G ...