CSS filter 属性
提示: 下面有更多 "Try it Yourself" 实例。
定义和用法
filter 属性定义元素（通常是 <img>）的视觉效果（如模糊和饱和度）。
| 默认值: | none |
|---|---|
| 继承性: | no |
| 支持动画: | yes. 阅读有关动画的信息 测试一下 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.filter="grayscale(100%)" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| filter | 53.0 18.0 -webkit- |
13.0 | 35.0 | 9.1 6.0 -webkit- |
40.0 15.0 -webkit- |
语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示: 如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。
Filter Functions
注释: 使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。
| 滤镜 | 描述 | 试一试 |
|---|---|---|
| none | 默认值。规定无效果。 | 亲自试一试 » |
| blur(px) |
对图像应用模糊效果。较大的值将产生更多的模糊。 如果为指定值，则使用 0。 |
亲自试一试 » |
| brightness(%) |
调整图像的亮度。
|
亲自试一试 » |
| contrast(%) |
调整图像的对比度。
|
亲自试一试 » |
| drop-shadow(h-shadow v-shadow blur spread color) |
对图像应用阴影效果。 可能的值:
blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。 注释:Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。 这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果: filter: drop-shadow(8px 8px 10px red); 提示: 这个滤镜类似 box-shadow 属性。 |
亲自试一试 » |
| grayscale(%) |
将图像转换为灰阶。
注释:不允许负值。 |
亲自试一试 » |
| hue-rotate(deg) |
在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。 注释: 最大值是 360deg。 |
亲自试一试 » |
| invert(%) |
反转图像中的样本。
注释:不允许负值。 |
亲自试一试 » |
| opacity(%) |
设置图像的不透明度级别。opacity-level 描述了透明度级别，其中:
注释: 不允许负值。 提示: 这个滤镜类似 opacity 属性。 |
亲自试一试 » |
| saturate(%) |
设置图像的饱和度。
注释:不允许负值。 |
亲自试一试 » |
| sepia(%) |
将图像转换为棕褐色。
注释: 不允许负值。 |
亲自试一试 » |
| 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 属性
