本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。
CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
目前有grayscale、blur、invert、saturate
等10个filter-function。
filter属性目前支持的浏览器较少,chrome,Firefox基本都支持了,IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome(47.0.2526.80),Firefox(43)上测试通过。先来看一下http://caniuse.com/的兼容性评测:
![filter 兼容性 filter 兼容性](https://img.smohan.net/article/b08723f1d777fa26381227fd2469e1d0.png?imageView2/1/interlace/1/q/100)
filter
主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function
值可选:
- grayscale(灰度)效果类似于PS中的去色或者黑白
- blur(模糊)效果类似于PS中的高斯模糊
- invert(反相)效果类似于PS中的反相
- opacity(透明度)效果类似于PS中的图层不透明度
- saturate(饱和度)效果类似于PS中的饱和度
- brightness(亮度)效果类似于PS中的亮度
- contrast(对比度)效果类似于PS中的对比度
- drop-shadow(阴影)效果类似于PS中的投影
- sepia(怀旧)效果类似于相机中的老照片滤镜
- hue-rotate(色相)效果类似于PS中的色相+旋转(不知道怎么说)
DEMO
GRAYSCALE(灰度)
.filter-grayscale{
-webkit-filter : grayscale(1);
filter : grayscale(1);
}
![grayscale grayscale](https://img.smohan.net/article/6e217c60303cdc90ca5115db029cfc56.jpg?imageView2/1/interlace/1/q/100)
BLUR(模糊)
.filter-blur{
-webkit-filter : blur(3px);
filter : blur(3px);
}
![blur blur](https://img.smohan.net/article/03356725d3874363296a6b64e96a0222.jpg?imageView2/1/interlace/1/q/100)
INVERT(反相)
.filter-invert{
-webkit-filter : invert(1);
filter : invert(1);
}
![invert invert](https://img.smohan.net/article/860b72138c373c13d9e801944c5bfa4a.jpg?imageView2/1/interlace/1/q/100)
OPACITY(透明度)
.filter-opacity{
-webkit-filter : opacity(.3);
filter : opacity(.3);
}
![opacity opacity](https://img.smohan.net/article/45c45a90d3b1011f0fb22c2c333c9242.jpg?imageView2/1/interlace/1/q/100)
SATURATE(饱和度)
.filter-saturate{
-webkit-filter : saturate(.3);
filter : saturate(.3);
}
![saturate saturate](https://img.smohan.net/article/c4285717f11417e861aa6c06a258e39c.jpg?imageView2/1/interlace/1/q/100)
BRIGHTNESS(亮度)
.filter-brightness{
-webkit-filter : brightness(.3);
filter : brightness(.3);
}
![brightness brightness](https://img.smohan.net/article/b06e923bae9ec6c2af890064c6c0936a.jpg?imageView2/1/interlace/1/q/100)
CONTRAST(对比度)
.filter-contrast{
-webkit-filter : contrast(3);
filter : contrast(3);
}
![contrast contrast](https://img.smohan.net/article/a5e8b627bdc953cabc3188822465b79c.jpg?imageView2/1/interlace/1/q/100)
DROP-SHADOW(阴影)
.filter-drop-shadow{
-webkit-filter : drop-shadow(5px 3px 7px #888);
filter : drop-shadow(5px 3px 7px #888);
}
![drop-shadow drop-shadow](https://img.smohan.net/article/871a24b4a2fe477293ff6ff132cdd524.jpg?imageView2/1/interlace/1/q/100)
SEPIA(怀旧)
.filter-sepia{
-webkit-filter : sepia(1);
filter : sepia(1);
}
![sepia sepia](https://img.smohan.net/article/9e991ee159b0e616db9f6862ff1e04e1.jpg?imageView2/1/interlace/1/q/100)
HUE-ROTATE(色相)
.filter-hue-rotate{
-webkit-filter : hue-rotate(135deg);
filter : hue-rotate(135deg);
}
![hue-rotate hue-rotate](https://img.smohan.net/article/ea0d4d411cf2028fa929b55fdf79a686.jpg?imageView2/1/interlace/1/q/100)