JavaScript HTML DOM Style filter 属性

filter 属性

filter属性为图像添加了视觉效果（如模糊和饱和度）。

将图像颜色更改为黑白（100％灰度）：

// 标准语法 syntax
document.getElementById("myImg").style.filter = "grayscale(100%)";

//   Safari 6.0 - 9.0
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
filter	13.0+	53.0+ 18.0 Webkit	35.0+	9.1+ 6.0 Webkit	40.0+ 15.0 Webkit

语法

返回filter属性：

object.style.filter

设置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：可选。为阴影添加颜色。如果未指定，颜色取决于浏览器（通常为黑色）。提示：此过滤器类似于box-shadow属性。
grayscale(%)	将图像转换为灰度。 0% (0) 是默认值并代表原始图像。 100％将使图像完全变灰（用于黑白图像）。注意：不允许使用负值。
hue-rotate(deg)	在图像上应用色调旋转。该值定义将调整图像样本的色环周围的度数。 0deg是默认值，表示原始图像。注意：最大值为360deg。 invert（％）反转图像中的样本。 0％（0）是默认值，表示原始图像。 100％将使图像完全反转。注意：不允许使用负值。
opacity(%)	设置图像的不透明度级别。不透明度级别描述透明度级别，其中： 0％完全透明。 100％（1）是默认值，表示原始图像（无透明度）。注意：不允许使用负值。提示：此过滤器类似于不透明度属性。
saturate(%)	使图像饱和。 0％（0）将使图像完全不饱和。 100％是默认值，表示原始图像。超过100％的值提供超饱和的结果。注意：不允许使用负值。
sepia(%)	将图像转换为棕褐色。 0％（0）是默认值，表示原始图像。 100％将使图像完全棕褐色。注意：不允许使用负值。

技术细节

项目	描述
CSS版本	CSS3

JavaScript HTML DOM Style filter 属性

filter 属性

浏览器支持

语法

属性值

技术细节

相关页面