黑马程序员技术交流社区

标题: 【广州前端】- CSS3滤镜的使用方法 [打印本页]

---

作者: AngularBaby    时间: 2018-1-26 15:02
标题: 【广州前端】- CSS3滤镜的使用方法


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案例

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

点击有惊喜

filter.zip

2018-1-26 15:05 上传

点击文件名下载附件

396.93 KB, 阅读权限: 10, 下载次数: 0

售价: 1 黑马币  [记录]  [购买]

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2