CSS3 filter(滤镜) 属性
filter 属性定义了元素 (通常是) 的可视效果(例如: 模糊与饱和度).
定义和使用
默认值 | none |
---|---|
继承 | no |
动画支持 | 是。详细可查阅 CSS 动画 |
版本 | CSS3 |
JavaScript 语法 | object.style.webkitFilter="grayscale(100%)" |
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多个滤镜.
Filter 函数
注意: 滤镜通常使用百分比 (如: 75%), 当然也可以使用小数来表示 (如: 0.75). 查看相关函数使用 http://www.runoob.com/cssref/css3-pr-filter.html
示例
修改所有图片的颜色为黑白 (100% 灰度):
- img {
- -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
- filter: grayscale(100%);
- }
这意味着当你有彩色 logo 图片时, UI 就不必再制作灰色的 logo 了.
参考文档
查看浏览器支持 http://www.runoob.com/cssref/css3-pr-filter.html
来源: http://www.bubuko.com/infodetail-2915861.html