纯css实现图片或者页面变灰色
前言
今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之力
css3 greyscale (灰度)
greyscale是css 3 filter里的一种属性,进行灰色滤镜。当然css3 filter还有其它滤镜属性,很实用,例如:高斯模糊、调节亮度、色相旋转、饱和度等等。css filter这一用法允许将单个图像用于多个目的不同的图像,或者在浏览器中应用过滤器,而不是在图像编辑器中进行过滤,不会出现大小比原始图像大,从而可以更快地加载页面并减少数据传输。
元素
css 3 grcyscale适用于以下元素
图形元素
html准备两张img
<img src="./gray.png" alt="">
<img src="./gray.png" alt="" class="gray">
css设置其中一张图片灰色
.gray{
/*grayscale(val):val值越大灰度就越深*/
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
a标签
<a href="#" >逝者安息</a>
<a href="#" class="gray">逝者安息</a>
效果
svg(子元素:defs、glyph、g、markey、missing-glyph、pattern、switch、symbol)
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://www.w3.org/2000/svg"> <defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs> <rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
</svg>
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://www.w3.org/2000/svg" class="gray"> <defs>
<linearGradient id="Gradient01" >
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs> <rect x="10" y="10" width="60" height="10"
fill="url(#Gradient01)" />
</svg>
效果
如果想把整个页面都渲染成灰色,一般在body标签或者最大的父元素添加样式grayscale,那么父元素里面能滤镜的元素都会变成灰色。比如说现在的博客园整个页面是灰色的
我打开控制台,找到了grayscale样式元素
将它取消掉,博客园界面就会变回原样
结束语:向英雄致敬
逝者安息 家国永念
纯css实现图片或者页面变灰色的更多相关文章
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯CSS实现图片
在Web开发中.通过CSS代码也能够实现一些简单的图片,当然,假设你有耐心,也能够实现较为复杂的图片噢. 那么请问为什么有图片不去用而须要用CSS来实现呢?一是由于性能的原因,图片带给server和c ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- js使用CSS将图片转换成黑白(灰色、置灰)
详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...
- [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大 ...
随机推荐
- 06.深入浅出 Spring Boot - 数据访问之Druid
代码下载:https://github.com/Jackson0714/study-spring-boot.git 一.Druid是什么? 1.Druid是数据库连接池,功能.性能.扩展性方面都算不错 ...
- 7-30 jmu-python-凯撒密码加密算法 (10 分)
编写一个凯撒密码加密程序,接收用户输入的文本和密钥k,对明文中的字母a-z和字母A-Z替换为其后第k个字母. 输入格式: 接收两行输入,第一行为待加密的明文,第二行为密钥k. 输出格式: 输出加密后的 ...
- windows下tensorflow/objectdetection API环境搭建(基于tensorflow1.14和python3.6)
此前就听闻室友说tensorflow在windows下坑很多,这次终于亲身领会到了.以下是参考网上大佬的教程以及自己的踩坑史总结出的有效步骤(亲测有效) 1.下载objectdetection所在的m ...
- 使用webpack从0搭建多入口网站脚手架,可复用导航栏/底部通栏/侧边栏,根据页面文件自动更改配置,支持ES6/Less
之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...
- d3.js ---画坐标轴
画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scal ...
- oracle根据特定字符拆分字符串的方法
清洗数据需要将某个字段内以空格分隔的字符串拆分成多行单个的字符串,百度了很多种方法大概归结起来也就这几种方法最为有效,现在把贴出来: 第一种: select regexp_substr('1 2 3' ...
- 李宏毅深度学习与人类语言处理-introduction
深度学习与人类语言处理(Deep learning for Human Language Processing) 李宏毅老师深度学习与人类语言处理课程笔记,请看正文 这门课会学到什么? 为什么叫人类语 ...
- 内网渗透之信息收集-Linux系统篇
linux 系统信息 grep MenTotal /proc/meminfo #查看系统内存总量 cat /etc/issue #查看系统名称 cat /etc/lsb-release #查看系统名称 ...
- 关于使用ajax导出excel问题
最近有个需求是在页面导入文件,后端进行处理后返回处理结果的excel,前端使用的是ajax.我最开始的做法是:在原有代码后加一段导出excel的代码,结果代码能正常运行,但页面始终没有返回我需要的ex ...
- Js数组代替写循环的几个方法
简介 循环是个不可避免的结构,而且不好复用,同时循环还很难加入其他操作中.更麻烦的是,使用循环就意味着在每一个新的迭代中有更多变化需要响应. 上了循环的控制结构会使代码看起来变得复杂,故而这里提几个替 ...