css滤镜filter的使用,主要是让图片进行一定的模糊,锐化等.mdn可以查到具体的函数方法
filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
先看下none的原图
test.jpg
blur的高斯模糊
img {
filter:blur(10px);;
}
微信图片_20181112141205.png
brightness(%)线性乘法,让图片变亮或变暗
img {
filter:brightness(60%);
}
微信图片_20181112141346.png
contrast(%)对比度
img {
filter:contrast(50%);
}
微信图片_20181112141446.png
drop-shadow(x y spread color)
给图片设置一个阴影效果,阴影合成在图像下面,有4个参数,可以设定阴影模糊度 颜色等
img {
filter: drop-shadow(59px 9px 7px #ccc);
}
微信图片_20181112142119.png
hue-rotate(deg) 色相旋转
img {
filter:hue-rotate(70deg);
}
微信图片_20181112142216.png
invert(%) 反转:100%有点像曝光底片的感觉
img {
filter:invert(100%)
}
微信图片_20181112142342.png
grayscale(%) 将图像转换为灰度图像:%越高,图片的整体灰色度越高
img {
filter:grayscale(80%);
}
微信图片_20181112142600.png
在一切纪念日网站想变灰就可以采用这种方式
*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
微信图片_20181112142819.png
sepia(%) 将图像转换为深褐色:有点暖色的感觉
img {
filter:sepia(80%)
}
微信图片_20181112143131.png
最后就是filter:url()
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="change">
<feColorMatrix values="5 -1 -1 0 0
-1 5 -1 0 0
-1 -5 15 0 0
0 10 7 1 0" />
</filter>
</defs>
</svg>
img {
filter:url(#change);
}
这块牵扯到svg的feColorMatrix...矩阵的东西比较复杂= =可以自行研究哈...
随便调了个效果..
微信图片_20181112144100.png
