实例
修改所有图片的颜色为黑白 (100% 灰度):
img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
定义和使用
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 为指定浏览器的前缀。
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 使用空格分隔多个滤镜。
Filter 函数
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
模糊实例
图片使用高斯模糊效果:
img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);
}
Brightness 函数实例
使图片变亮:
img { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%); }
Contrast 函数实例
调整图像的对比度:
img { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%); }
drop-shadow 函数实例
给图像设置一个阴影效果:
img { -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red); }
Grayscale 函数实例
将图像转换为灰度图像:
img { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); }
hue-rotate() 函数实例
给图像应用色相旋转:
img { -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */ filter: hue-rotate(90deg); }
Invert 函数实例
反转输入图像:
img { -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%); }
Opacity 函数实例
转化图像的透明程度:
img { -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */ filter: opacity(30%); }
Saturate 函数实例
转换图像饱和度:
img { -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */ filter: saturate(800%); }
Sepia 函数实例
将图像转换为深褐色:
img { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%); }
复合函数
使用多个滤镜,每个滤镜使用空格分隔。
注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。
img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%); }
所有滤镜实例
以下实例演示了所有滤镜的使用方法:
.blur { -webkit-filter: blur(4px); filter: blur(4px); } .brightness { -webkit-filter: brightness(0.30); filter: brightness(0.30); } .contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } .invert { -webkit-filter: invert(100%); filter: invert(100%); } .opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } .saturate { -webkit-filter: saturate(7); filter: saturate(7); } .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); } .shadow { -webkit-filter: drop-shadow(8px 8px 10px green); filter: drop-shadow(8px 8px 10px green); }
链接:http://www.runoob.com/cssref/css3-pr-filter.html
链接:http://www.runoob.com/try/try.php?filename=trycss3_filter_all