filter 滤镜

Posted DJL箫氏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了filter 滤镜相关的知识,希望对你有一定的参考价值。

今天在做一个项目时,接触到了这个属性。再一次见识到了CSS的强大。

先来看看兼容性

很遗憾IE全军覆没了,但是其他浏览器还是可以的。接下来我们来看看他有哪些厉害之处。

blur(),blur功能函数就是来设置图片的模糊程度。

filter: blur(10px);

值就是模糊半径,效果图如下。

brightness():就是通常所说的亮度

filter: brightness(0);

当值设置成0或者不设置值时,会全黑。当设置100%时,就是原图效果,如果>100%,那么就会比原图更亮

                                                          

 

contrast():对比度。

hue-rotate(): 颜色调整,怎么调整。传入一个角度值,按照color wheel来进行旋转

invert():颜色反转。一张全白的图片经过invert(100%)后变成一张纯黑色

grayscale():灰度

opacity()  透明

saturate()  :饱和度  使图片看起来更加艳丽

sepia() :老化

drop-shadow()  阴影,这个和box-shadow很像,但是还是有区别的,box-shdow(下图左),drop-shadow(下图右)

        

url():传入SVG链接。

使用方法都很简单,有机会做成这个网站https://html5-demos.appspot.com/static/css/filters/index.html

参考链接:http://tympanus.net/codrops/css_reference/filter

 

以上是关于filter 滤镜的主要内容,如果未能解决你的问题,请参考以下文章

css3的滤镜filter属性

filter(HTML)滤镜用法

CSS滤镜filter

filter滤镜的使用

滤镜 filter:gray 变灰色

filter 图片滤镜的各种设置