CSS filter 属性
提示： 以下还有更多“亲自尝试”示例。
定义和用法
filter<img>）定义视觉效果（如模糊和饱和度）。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| filter | 53 | 13 | 35 | 9 | 40 |
CSS 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示： 要使用多个滤镜，请用空格分隔每个滤镜（参见下面的“更多示例”）。
滤镜函数
注意： 使用百分比值（即 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 - 可选。向阴影添加颜色。如果没有指定，颜色取决于浏览器（通常为黑色）。 创建红色阴影的示例，该阴影在水平和垂直方向上都为 8px，模糊效果为 10px filter: drop-shadow(8px 8px 10px red); 提示： 此滤镜类似于 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% 将使图像完全变为棕褐色。 注意： 不允许负值。 |
演示 ❯ |
| url() | url() 函数采用指定 SVG 滤镜的 XML 文件的位置，并且可能包含指向特定滤镜元素的锚点。示例 filter: url(svg-url#element-id) |
|
| initial | 将此属性设置为其默认值。 阅读有关initial | |
| inherit | 从其父元素继承此属性。 阅读有关inherit |
更多示例
使用多个滤镜
要使用多个滤镜，请用空格分隔每个滤镜。请注意，顺序很重要（例如，在 sepia() 之后使用 grayscale() 将导致图像完全变为灰色）
img {
filter: contrast(200%) brightness(150%);
}
亲自尝试 »
所有滤镜
所有滤镜函数的演示
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
亲自尝试 »
相关页面
CSS 教程： CSS 图像
HTML DOM 参考： filter 属性
