CSS filter属性，可以在元素呈现之前，为元素的渲染提供一些效果。如高斯模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

例如很好玩的毛玻璃效果：
原图：

使用 filter: blur(5px) 后：


浏览器支持情况如下：

（基本都已支持，除 IE ）

用法很简单，给img标签添加 filter 样式即可
支持同时传入n个属性

具体的属性作用如下：

filter	描述
none	无效果
blur(px)	模糊度
brightness(%)	亮度
contrast(%)	对比度
drop-shadow(x y 模糊度 color)	阴影
grayscale	灰度
hue-rotate	色相旋转
invert	反转颜色
opacity	不透明度
saturate	饱和度
sepia	焦色度

具体用法还可以查看本文附件中的Demo案例

点击查看更多精彩前端资源

点击有惊喜

CSS filter属性，可以在元素呈现之前，为元素的渲染提供一些效果。如高斯模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

例如很好玩的毛玻璃效果：
原图：

使用 filter: blur(5px) 后：


浏览器支持情况如下：

（基本都已支持，除 IE ）

用法很简单，给img标签添加 filter 样式即可
支持同时传入n个属性

具体的属性作用如下：

filter	描述
none	无效果
blur(px)	模糊度
brightness(%)	亮度
contrast(%)	对比度
drop-shadow(x y 模糊度 color)	阴影
grayscale	灰度
hue-rotate	色相旋转
invert	反转颜色
opacity	不透明度
saturate	饱和度
sepia	焦色度

具体用法还可以查看本文附件中的Demo案例

点击查看更多精彩前端资源

点击有惊喜