例
改变图像为黑色和白色的颜色(100% grayscale) ：
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
试一试» 定义和用法
该过滤器属性增加了视觉效果(like blur and saturation)到图像。
浏览器支持
在表中的数字规定，完全支持该财产浏览器版本。
数字后面的Webkit指定的前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| filter | 18.0的Webkit | 13.0 | 35.0 | 6.0的Webkit | 15.0的Webkit |
注：浏览器，Safari和Opera支持替代方案，WebkitFilter财产。
句法
返回过滤器属性：
object .style.filter设置过滤器属性：
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
过滤功能
注意：使用百分比值滤波器(ie 75%)同时接受的价值为十进制(ie 0.75)
| 过滤 | 描述 |
|---|---|
| 没有 | 指定无影响 |
| blur( px ) | 应用模糊效果的图像。 较大的值会产生更多的模糊。 如果未指定值，则使用0。 |
| brightness( % ) | 调节图像的亮度。 0％将会使图像全黑。 100％ (1)是默认的，表示原始图像。 超过100％的值将提供更明亮的效果。 |
| contrast( % ) | 调整图像的对比度。 0％将会使图像全黑。 100％ (1)是默认的，表示原始图像。 超过100％的值将提供结果与对比度较低。 |
| 滴shadow( h-shadow v-shadow blur spread color ) | 适用阴影效果的图像。 可能的值： H-阴影 -必需。 指定的像素值的水平阴影。 负值阴影放置到图像的左侧。 V-阴影 -必需。 指定垂直阴影的像素值。 负值地方阴影上面的图片。 模糊 -可选。 这是第三个价值，而且必须以像素为单位。 添加一个模糊效果的阴影。 较大的值会产生多个模糊（阴影变得更大和更亮）。 负值是不允许的。 如果没有指定值，0被使用（阴影的边缘是锋利的）。 传播 -可选。 这是第四个价值，必须以像素为单位。 正值将使阴影扩大和壮大规模，负值将导致阴影萎缩。 如果未指定，这将是0 (the shadow will be the same size as the element) 。 注：浏览器，Safari和Opera，也许其他的浏览器不支持此第四长度; 如果添加也不会呈现。 颜色：可选。 增加了一个颜色的阴影。 如果没有指定，颜色取决于浏览器(often black) 。 提示：此过滤器是类似的box-shadow属性。 |
| grayscale( % ) | 转换为灰度图像。 0％ (0)是默认的，表示原始图像。 100％会使影像完全灰化(used for black and white images) 。 注意：负值是不允许的。 |
| 色调- rotate( deg ) | 应用图像上的色调旋转。 该值定义沿色环的图像样本将被调整的度数。 0deg是默认，并表示原始图像。 注：最大值为360deg。 |
| invert( % ) | 反转图像中的样本。 0％ (0)是默认的，表示原始图像。 100％将会使图像完全反转。 注意：负值是不允许的。 |
| opacity( % ) | 设置图像的透明度级别。 不透明度级别描述透明度级别，其中： 0％是完全透明的。 100％ (1)是默认的，表示原始图像(no transparency) 。 注意：负值是不允许的。 提示：此过滤器类似于不透明财产。 |
| saturate( % ) | 饱和的图像。 0％ (0)将会使图像完全不饱和的。 100％是默认和表示原始图像。 超过100％的值提供了超饱和的结果。 注意：负值是不允许的。 |
| sepia( % ) | 将图像转换为棕褐色。 0％ (0)是默认的，表示原始图像。 100％将会使图像完全棕褐色。 注意：负值是不允许的。 |
技术细节
| CSS版本 | CSS3 |
|---|
相关页面
CSS参考： filter property
<Style对象