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.去广 ...
随机推荐
- ubuntu 查看服务列表
查看服务列表代码 sudo service --status-allsudo initctl list from: http://zhidao.baidu.com/link?url=hLMXGocC2 ...
- iOS 启动页放大淡出效果
//屏幕宽度#define kWIDTH [UIScreen mainScreen].bounds.size.width//屏幕高度 #define kHEIGHT [UIScreen mainScr ...
- 【BZOJ3784】树上的路径 点分治序+ST表
[BZOJ3784]树上的路径 Description 给定一个N个结点的树,结点用正整数1..N编号.每条边有一个正整数权值.用d(a,b)表示从结点a到结点b路边上经过边的权值.其中要求a< ...
- Spring MVC中的模型数据处理
一.综述 Spring MVC 提供了以下途径来输出模型数据: 1.ModelAndView 当处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加模型数据到请求域. 2.Ma ...
- 九度OJ 1256:找出两个只出现了一次的数字 (位运算)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:568 解决:186 题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 输入: 输入的 ...
- Netty ByteBuf(图解之 2)| 秒懂
目录 Netty ByteBuf(图解二):API 图解 源码工程 写在前面 ByteBuf 的四个逻辑部分 ByteBuf 的三个指针 ByteBuf 的三组方法 ByteBuf 的引用计数 Byt ...
- Python菜鸟之路:JQuery基础
前言 JQuery可以理解为是一个模块,里边封装了DOM以及JavaScript,可以方便的对JQuery对象进行操作. 版本 尽量选择1.X系统的Jquery版本,例如1.12.jquery.js. ...
- Java 重写 equals 与 hashCode 的注意事项
为什么重写 equals 的时候必须重写 hashCode 大家可能从很多教程中了解到: SUN官方的文档中规定"如果重定义equals方法,就必须重定义hashCode方法,以便用户可以将 ...
- Python锁
# coding:utf-8 import threading import time def test_xc(): f = open("test.txt","a&quo ...
- js:深入函数的定义
函数定义方式: 1.function fun1(){alert("fun1");} //函数就是一个很特殊的对象.是一个Function的实例.事实上在内存中存储的操作是通过一个 ...