为什么 CSS 滤镜 (filter 属性) 没用? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
滤镜 filter 属性, 可以对网页中的图片进行类似 Photoshop 图片处理的效果, h5 时代的来临, 我们可以通过 CSS 对图像进行处理.
CSS 滤镜 (filter) 属性对浏览器有兼容问题. 老版本的 IE 浏览器不支持 filter(滤镜)属性, 为了兼容低版本的 Safari 和 google 浏览器, 需要加上前缀 - webkit-.
其实这个 filter 是 CSS1 的属性了, 但是因为老版本的 IE4.0~IE9 对此支持不怎么感冒, 对浏览器的支持也不稳定, 因此这个属性只能当做实验性技术来观察.
filter(滤镜)属性现在规范中支持的效果有:
grayscale 灰度(值为 0-1 之间的小数)
- filter:grayscale(1);
- -webkit-filter:grayscale(1);
0 表示灰度为 0%, 显示原图, 1 表示灰度为 100% 灰色.
灰度
sepia 褐色(值为 0-1 之间的小数)
- filter:sepia(1);
- -webkit-filter:sepia(1);
0 表示褐色度为 0%, 显示原图, 1 表示褐色度为 100% 显示褐色.
saturate 饱和度(值为 num)
- filter:saturate(1.8);
- -webkit-filter:saturate(1.8);
0 表示饱和为 0, 图片显示黑白色, 0.5 表示饱和度为原图的一半, 1 表示饱和度等于原图, 数值大于 1 表示饱和度加强.
hue-rotate 色相旋转 (值为 angle) 角度 deg
- filter:hue-rotate(60deg);
- -webkit-filter:hue-rotate(60deg);
表示色相旋转的具体角度.
invert 反色(值为 0-1 之间的小数)
- filter:invert(1);
- -webkit-filter:invert(1);
0 表示不反色显示原图, 1 表示 100% 完全反色.
opacity 透明度(值为 0-1 之间的小数)
- filter:opacity(0.5);
- -webkit-filter:opacity(0.5);
0 表示完全透明, 0.5 表示半透明, 1 表示 100% 完全不透明.
brightness 亮度(值为 num)
- filter:brightness(2);
- -webkit-filter:brightness(2);
0 表示亮度为 0, 显示黑色, 0.5 表示亮度为原图的一半, 1 表示原图亮度, 数值大于 1 表示亮度加强.
contrast 对比度(值为 num)
- filter:contrast(1.8);
- -webkit-filter:contrast(1.8);
0 表示对比度为 0, 为纯色, 0.5 表示对比度为原图的一半, 1 为原图对比度, 数值大于 1, 值越大, 对比度越强.
blur 模糊(值为 length)
- filter:blur(5px);
- -webkit-filter:blur(5px);
表示虚化程度像素值.
drop-shadow 阴影
- filter:drop-shadow(0 0 10px #000);
- -webkit-filter:drop-shadow(0 0 10px #000);
和 css3 box-shadow 属性值一致.
多个属性值可以写一起, 用空格隔开, 类似 transform 多属性写法
- filter:saturate(1.8) blur(3px);
- -webkit-filter:saturate(1.8) blur(3px);
饱和度 + 模糊
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17270.html