在 HTML 网页中使用 CSS 滤镜

发布于 2017-12-23 20:17:01 字数 1328 浏览 2281 评论 0

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

在网页中使用 CSS 滤镜

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

在网页中使用 CSS 滤镜

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。