添加图像效果

---

了解如何为图像添加视觉效果。

---

图像过滤器

亲自试一试 »

---

CSS 过滤器

CSS filter 属性为元素添加视觉效果（如模糊和饱和度）。

注释: Internet Explorer、Edge 12 或 Safari 5.1 及更早版本不支持 filter 属性。

Grayscale 实例

将所有图像的颜色更改为黑白（100% 灰色）:

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
} Original image grayscale(100%)

亲自试一试 »

---

---

Blur 实例

对所有图像应用模糊效果:

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
Original image blur(5px)

亲自试一试 »

转到我们的 CSS 过滤器属性，了解有关 CSS 过滤器的更多信息。