本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了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)上测试通过。:
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中的色相+旋转(不知道怎么说)
grayscale(灰度)
.filter-grayscale{
-webkit-filter : grayscale(1);
filter : grayscale(1);
}
blur(模糊)
.filter-blur{
-webkit-filter : blur(3px);
filter : blur(3px);
}
invert(反相)
.filter-invert{
-webkit-filter : invert(1);
opacity(透明度)
.filter-opacity{
-webkit-filter : opacity(.3);
filter : opacity(.3);
}
saturate(饱和度)
.filter-saturate{
-webkit-filter : saturate(.3);
filter : saturate(.3);
}
brightness(亮度)
.filter-brightness{
-webkit-filter : brightness(.3);
filter : brightness(.3);
}
contrast(对比度)
.filter-contrast{
-webkit-filter : contrast(3);
filter : contrast(3);
}
drop-shadow(阴影)
.filter-drop-shadow{
-webkit-filter : drop-shadow(5px 3px 7px #888);
filter : drop-shadow(5px 3px 7px #888);
}
sepia(怀旧)
.filter-sepia{
-webkit-filter : sepia(1);
filter : sepia(1);
}
hue-rotate(色相)
.filter-hue-rotate{
-webkit-filter : hue-rotate(135deg);
filter : hue-rotate(135deg);
}