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 内部的实现是大学的线性代数和矩阵的知识,比如矩阵的乘法,置换等等。