在 HTML 网页中使用 CSS 滤镜

Question

多年来CSS已经为我们提供越来越多的方式完成的事情没有图像编辑器，无论是 3D 变换或边界半径。兼容一直是难题之一，虽然能用JavaScript、PHP 或其他方式使用CSS滤镜。 为了解决这个问题，W3C 已经拿出 CSS 过滤器。使用过滤器，我们可以完成许多不仅适用于图像效果，但可以用文本和 HTML 完成的事。

CSS 滤镜的支持

CSS 滤镜属性的作品就像任何其他的 CSS 属性。然而，像往常一样浏览器的支持是相当薄的地面上唯一的浏览器，支持过滤器是基于 WebKit（Safari 和 Chrome） 。出于这个原因，我们需要使用浏览器前缀。尽管 WebKit 是唯一的过滤引擎，支持，我们将使用所有的浏览器前缀，因为它是最好的做法。

使用 CSS 滤镜

这里有各种可以使用的值。当使用过滤器记住，并非所有的游客将能够看到他们，所以最好不要使用它们的方式是必要的用户体验。下面是一个例子，在此我们将图像设置有一个加入 5px 高斯模糊：

img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

灰度和模糊是一个巨大的过滤器只有两个。