CSS3 filter(滤镜) 百度汶川地震页面的使用

filter（滤镜）在生活中的使用
今天是2018年5月12号，2008年汶川地震10年。特地去搜索了一下汶川地震。发现这个页面全部灰色的，突然想了一下，他是什么实现的。第一感觉是css3的filter滤镜效果做的。实时怎么确实也是的。

发现在这样的有单独内嵌的一段css代码，去掉就恢复彩色了。就是css3 滤镜代码。我单独拔下来了

.baike-app-view .memorial {filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)
}

关于css3的filter 滤镜

还是要注意兼容性，现在的手机端基本全部支持没问题。但是ie确实还是有点坑爹。

语法

      elem {filter: none | <filter-function > [ <filter-function> ]* }

其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选

grayscale 灰度
sepia 深褐色（求专业指点翻译）
saturate饱和度 (默认值1 百分之百饱和)
hue-rotate 色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影

这些可选的值可以单个使用也可以组合使用
.img {
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>filter的使用</title><style>img {width: 200px;margin: 10px;}.item1 .img2 {/* grayscale灰度 */filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}.item2 .img2 {/*深褐色（求专业指点翻译）*/filter: sepia(0.5);-webkit-filter: sepia(0.5);}.item3 .img2 {/* saturate饱和度 */filter: saturate(3);-webkit-filter: saturate(3);}.item4 .img2 {/* hue-rotate 色相旋转 */filter: hue-rotate(60deg);-webkit-filter: hue-rotate(60deg);}.item5 .img2 {/* invert反色 */filter: invert(1);-webkit-filter: invert(1);}.item6 .img2 {/*opacity透明度*/filter: opacity(0.8);-webkit-filter: opacity(0.8);}.item7 .img2 {/*brightness亮度*/filter: brightness(0.5);-webkit-filter: brightness(0.5);}.item8 .img2 {/* contrast对比度 */filter: contrast(2);-webkit-filter: contrast(2);}.item9 .img2 {/* blur模糊 */filter: blur(2px);-webkit-filter: blur(2px);}.item10 .img2 {/* drop-shadow阴影 */filter: drop-shadow(5px 5px 5px #ccc);-webkit-filter: drop-shadow(5px 5px 5px #ccc);}</style>
</head><body><div class="item1"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)</p></div><div class="item2"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: sepia(0.5); -webkit-filter: sepia(0.5);</p></div><div class="item3"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: saturate(0.5); -webkit-filter: saturate(0.5);</p></div><div class="item4"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: hue-rotate(0.5); -webkit-filter: hue-rotate(0.5);</p></div><div class="item5"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: invert(0.5); -webkit-filter: invert(0.5);</p></div><div class="item6"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: opacity(0.5); -webkit-filter: opacity(0.5);</p></div><div class="item7"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: brightness(0.5); -webkit-filter: brightness(0.5);</p></div><div class="item8"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: contrast(0.5); -webkit-filter: contrast(0.5);</p></div><div class="item9"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: blur(0.5); -webkit-filter: blur(0.5);</p></div><div class="item10"><img src="./longcat.jpg" alt="" class="img1"><img src="./longcat.jpg" alt="" class="img2"><p>filter: drop-shadow(0.5); -webkit-filter: drop-shadow(0.5);</p></div>
</body></html>

其实个人觉得可以使用 fliter效果加上 canvas 前端也可以做到美图秀秀的功能。fliter 内部的实现是大学的线性代数和矩阵的知识，比如矩阵的乘法，置换等等。

CSS3 filter(滤镜) 百度汶川地震页面的使用相关推荐

css3 filter url,CSS3 filter(滤镜) 属性
CSS3 filter(滤镜) 属性实例修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...
html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS
CSS3 filter(滤镜) 制作图片高斯模糊无需JS 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽的一B!!!起 ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
一个css属性让页面变成黑白色之CSS3 filter(滤镜) 属性
2020年是不平凡的一年,在此缅怀一下在抗击新冠肺炎中牺牲的烈士和因为新冠肺炎去世的同胞们,有时候我们需要让网站的页面变成黑白色彩的,只需要一个css属性filter属性即可: filter 属性定义 ...
html 界面模糊的效果，CSS3 filter(滤镜) 说明，超级马赛克。＜(￣︶￣)↗[GO!]
兼容性表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 为指定浏览器的前缀. 属性 filter 18.0 -webkit- 不支持 35.0 6.0 -web ...
CSS3 filter滤镜
filter 顾名思义就是过滤的意思使用 filter属性为元素(常用于<img>)带来视觉的效果 filter 描述 none 默认值,没有效果. blur(px) 给图像设置模糊效果 ...
css3背景色由浅黑变深黑_CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
前端 css3,filter实现不但可以实现网页灰色效果,还可以辅助实现黑夜模式效果.我们来看看实现方式吧! filter属性介绍 filter: none | blur() | brightness ...
css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...

CSS3 filter(滤镜) 百度汶川地震页面的使用

CSS3 filter(滤镜) 百度汶川地震页面的使用相关推荐

最新文章

热门文章