您的位置:首页> 日志> 前端技术 正文
DTOP

CSS3实现常见滤镜效果

NoyaHua | 2016年09月26日 |

>>收藏本文 已有 0条评论

  我们都知道Photoshop里滤镜效果非常强大,作图时可以用它实现很多意想不到的效果。而CSS3的Filter同样也能实现很多类似PS里做出的滤镜效果。

语法:filter: function(param);

CSS滤镜支持的方法有

1. grayscale 灰度
2. sepia 褐色
3. saturate 饱和度
4. hue-rotate 色相旋转
5. invert 反色
6. opacity 透明度
7. brightness 亮度
8. contrast 对比度
9. blur 模糊
10. drop-shadow 阴影

浏览器的兼容性
目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持。下面我们来看一下效果吧。

一、grayscale 灰度
css样式:
使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色”。默认值:100%,其效果下图所示:

二、sepia滤镜
css样式: 
以100%渲染后,图片呈现褐色。

三、saturate饱和度
saturate是用来改变图片的饱和度
css样式:
效果如:
当然也可以通过设置参数值降低饱和度。

 

四、hue-rotate色相旋转
css:

五、invert反色

css样式:


六、opacity透明度
css样式:

七、brightness亮度 (改变图片的亮度)
css样式:

八、contrast对比度
css样式:


九、blur模糊
css样式:


十、drop-shadow阴影(这个很像box-shadow一样的效果,给图片加阴影效果)
css样式: