Style filter 属性
描述
filter 属性为图像添加视觉效果（如模糊和饱和度）。
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| filter | 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
语法
返回 filter 属性
object.style.filter
设置 filter 属性
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
过滤器函数
注意： 使用百分比值（即 75%）的过滤器也接受十进制值（即 0.75）。
| 过滤器 | 描述 |
|---|---|
| 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）是默认值，表示原始图像（没有透明度）。 注意： 不允许负值。 提示： 此过滤器类似于 opacity 属性。 |
| saturate(%) | 使图像饱和。 0%（0）将使图像完全不饱和。 100% 是默认值，表示原始图像。 大于 100% 的值将提供超级饱和的结果。 注意： 不允许负值。 |
| sepia(%) | 将图像转换为棕褐色。 0%（0）是默认值，表示原始图像。 100% 将使图像完全变为棕褐色。 注意： 不允许负值。 |
技术细节
| CSS 版本 | CSS3 |
|---|
相关页面
CSS 参考：filter 属性
