Style filter 属性 详解
Style filter 属性
实例
将图像的颜色更改为黑白（100% 灰度）：
document.getElementById("myImg").style.filter = "grayscale(100%)";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<p>点击该按钮可将图像的颜色更改为黑白（100% 灰）。</p>
<button onclick="myFunction()">试一试</button><br><br>
<img id="myImg" src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
<p><b>注释：</b>filter 属性在 Internet Explorer 或 Edge 12 中不起作用。</p>
<script>
function myFunction() {
document.getElementById("myImg").style.filter = "grayscale(100%)";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 filter 属性：
object.style.filter
设置 filter 属性：
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Filter 函数
注释：使用百分比值（如 75%）的 filter 也接受十进制值（即 0.75）。
| Filter | 描述 |
|---|---|
| none | 规定无效果。 |
| blur(px) |
对图像应用模糊效果。较大的值会产生更多的模糊。 如果未规定值，则使用 0。 |
| brightness(%) |
调整图像的亮度。 0% 将使图像完全变黑。 100% (1) 是默认值，表示原始图像。 超过 100% 的值将提供更亮的结果。 |
| contrast(%) |
调整图像的对比度。 0% 将使图像完全变黑。 100% (1) 是默认值，表示原始图像。 超过 100% 的值将提供对比度较低的结果。 |
| drop-shadow(h-shadow v-shadow blur spread color) |
对图像应用投影效果。 可能的值： h-shadow - 必需。规定水平阴影的像素值。负值将阴影放置在图像的左侧。 v-shadow - 必需。规定垂直阴影的像素值。负值将阴影置于图像上方。 blur - 可选。第三个值，须以像素为单位。为阴影添加模糊效果。较大的值会产生更多的模糊（阴影变得更大更亮）。不允许使用负值。如果未规定值，则使用 0（阴影的边缘是锐利的）。 spread - 可选。第四个值，须以像素为单位。正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未规定，它将为 0（阴影将与元素大小相同）。 注释：Chrome、Safari 和 Opera，可能还有其他浏览器，不支持第 4 种长度；如果添加，它将不会呈现。 color：可选。为阴影添加颜色。如果未规定，颜色取决于浏览器（通常为黑色）。 提示：此 filter 类似于 box-shadow 属性。 |
| grayscale(%) |
将图像转换为灰度。 0% (0) 是默认值，表示原始图像。 100% 将使图像完全变灰（用于黑白图像）。 注释：不允许负值。 |
| hue-rotate(deg) |
在图像上应用色调旋转。该值定义图像样本将被调整的围绕色环的度数。 0deg 是默认值，表示原始图像。 注释：最大值为 360 度。 |
| invert(%) |
反转图像中的样本。 0% (0) 是默认值，表示原始图像。 100% 将使图像完全反转。 注释：不允许负值。 |
| opacity(%) |
设置图像的不透明度级别。不透明度级别描述了透明度级别，其中： 0% 是完全透明的。 100% (1) 是默认值，表示原始图像（无透明度）。 注释：不允许负值。 提示：此 filter 类似于 opacity 属性。 |
| saturate(%) |
调整图像饱和度。 0% (0) 将使图像完全不饱和。 100% 是默认值，表示原始图像。 超过 100% 的值会提供过饱和的结果。 注释：不允许负值。 |
| sepia(%) |
将图像转换为棕褐色。 0% (0) 是默认值，表示原始图像。 100% 会使图像完全呈棕褐色。 注释：不允许负值。 |
技术细节
| CSS 版本： | CSS3 |
|---|
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
