在html中添加滤镜,在 HTML 网页中使用 CSS 滤镜 - 文章教程

最新推荐文章于 2022-12-01 15:14:53 发布

weixin_39706367

最新推荐文章于 2022-12-01 15:14:53 发布

阅读量250

点赞数

文章标签：在html中添加滤镜

多年来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);

}