文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

CSS backdrop-filter property

今天,我们将了解在Filter Effects Module Level 2规范中介绍的CSS backdrop-filter 属性。 我们将特别介绍backdrop-filter属性的语法浏览器支持实际应用

本文所包含的所有图片都来自 Pixabay.com.

Backdrop-filter与过滤器不同

你可能已经听说过CSS过滤器。 如果你需要复习一下这部分内容,CSS滤镜效果:模糊,灰度,亮度和更多的CSS! 这篇文章将是非常值得阅读的。

虽然 filter 属性帮助我们在给定的元素上应用类似于模糊和棕褐色效果,但是 backdrop-filter 属性将帮助我们对元素后面的区域应用相同的效果。 这里用一个演示来说明差异(确保您使用合适的浏览器,如启用了实验性Web平台功能标记的Chrome浏览器 - 更多的浏览器支持在下一节讲到):

第 1 段(可获 1.85 积分)

请参阅SitePoint (@SitePoint) 在 CodePen上写的 Pen 过滤器和背景过滤器

在第一种情况下,过滤器应用于整个图像,在第二种情况下,它只是应用于我们的文本内容正后方的部分。 我想说明的是,效果不适用于元素自己的背景,而是元素下面的内容。 你还必须保持元素自己的背景至少有点透明,否则访问者将无法看到预期的视觉效果。

语法和浏览器支持

backdrop-filter属性与您可能已经熟悉的过滤器属性有许多相似用法。 您可以使用以下语法将其应用于任何元素:

backdrop-filter: <filter-function> [<filter-function>]* | none
第 2 段(可获 1.55 积分)

filter 属性一样,您可以对元素的背景应用多个过滤器。 对 filter 属性有效的所有值也对  backdrop-filter 属性有效。 这个属性也可以是动画。

尽管两个属性之间有很多相似之处,backdrop-filter不像filter属性那样享受相同的浏览器支持。 现在,只有Safari 9支持此属性,无需标志位,即使在这种情况下,您必须使用 -webkit-前缀。

对于Chrome和Opera,您可以启用“chrome://flags”下的“实验性Web平台功能”标记。 Firefox和Edge中不支持该属性。 您可以在我可以使用网站阅读更多关于浏览器支持的backdrop-filter

第 3 段(可获 1.41 积分)

使用Backdrop-filter

backdrop-filter 属性需要至少两个元素才能正常工作 - 一个目标元素和目标下面的另一个元素,效果将应用到该元素上。 要在上面的演示中创建背景效果,我们使用了以下标记:

<div class="backdrop">
  <div class="content">
    <h3>A Heading</h3>
    <p>Some random text related to the heading.</p>
  </div>
</div>

我们还使用以下CSS在元素的背景上应用过滤器,并为我们的文本内容设置背景:

.backdrop {
  background: url('path/to/image.jpg');
}

.content {
  position: relative;
  top: 30%;
  background: rgba(100,150,100,0.35);
  backdrop-filter: hue-rotate(180deg);
}
第 4 段(可获 0.83 积分)

该属性的另一个有趣的用途是对图像的不同部分应用不同的过滤器。 我不是说要同时对整个图像应用多个过滤器,顺便说一下,这也是可能的。 我说的将 grayscale 过滤器应用于图像的左边,将 sepia 过滤器应用于图像的右边,或将图像分成多个部分,并使用不同的值对所有部分应用hue-rotate。 实现这一目标的一种方法是将目标元素的透明度设置为零,以便它们不会干扰我们在下图中应用过滤器。

第 5 段(可获 1.4 积分)

backdrop-filter Property Example Multiple Filters Side by Side

这是你需要的标记:

<div class="backdrop">
  <div class="target a">
  </div>
  <div class="target b">
  </div>
  ....
</div>

这是CSS:

.target {
  position: absolute;
  top: 0%;
  height: 100%;
  width: 20%;
  opacity: 0;
}

.a {
  left: 0%;
  backdrop-filter: hue-rotate(30deg);
}

.b {
  left: 20%;
  backdrop-filter: hue-rotate(90deg);
}

/* Filters for other sections of the image */

这是我的例子的最终结果:

请参阅SitePoint (@SitePoint) 在 CodePen 上写的 Pen 多个并排过滤器 。

 

图像最终看起来有多好取决于您的图像以及您选择应用的过滤器,但如果使用正确,此属性可以创建一些非常酷的效果。 你应该尝试不同的过滤器,看看你能做出什么。

第 6 段(可获 1 积分)

我们还可以为我们的目标元素添加不同的动画属性。 例如,在下面的演示中,我们的图像的顶部有两个div,我对它们中的每一个应用了不同的过滤器。

backdrop-filter Property Animating Target Properties Example

当有人悬停在图像上时,第一个div的宽度和第二个div的高度在0.5s的时间段内从0%变化到80%。 这将我们的图像分为四个不同的部分,每个部分都应用了自己的过滤器组合:

请参阅SitePoint (@SitePoint) 在 CodePen 上写的 Pen  为目标元素添加动画效果

 

其他可用功能还包括使用SVG过滤器和为应用于目标元素的过滤器设置动画。

第 7 段(可获 1.36 积分)

应用

使用 backdrop-filter 创建所有这些花哨的效果确实很好,但是这些属性也有很多实际的应用。 当我开始了解这个属性时,我立刻想到了一件事,就是我们如何使用它来模糊图像,并在向用户显示一些图形内容之前向用户发出警告。

Blurring using backdrop-filter

这是我们开始做时需要的标记:

<div class="graphic-content">
  <img src="path/to/graphic/image.jpg">
  <div class="warning">
    <p>Click on the button below to see the image from the murder scene.</p>
    <button>Show Me</button>
  </div>
</div>
第 8 段(可获 0.8 积分)

我们将打算模糊的图像和警告文本包在一个div中。 警告文本进一步包在另一个div中,其宽度和高度将等于图像的宽度和高度。

这是创建图像上模糊效果的CSS:

.warning {
  background: rgba(0,0,0,0.75);
  backdrop-filter:contrast(4) blur(20px);
}

你可以尝试不同的背景颜色和过滤器,看看什么最适合你。 在演示中,我还添加了一些JavaScript来在用户单击“显示我(Show Me)”按钮后隐藏警告文本。 你应该试试:

请参阅SitePoint (@SitePoint) 在 CodePen 上写的 Pen  模糊图像内容

您还可以使用 backdrop-filter 属性在向用户显示模式时创建模糊的背景,或者在弹出画布菜单后将其背景淡化。  backdrop-filter的另一个用途是在图像完全加载前模糊它们,就像在 Medium 网站上那样。

第 9 段(可获 2 积分)

结论

使用 backdrop-filter 属性,您将能够创建很多以前需要JavaScript才能实现的效果。 但是,我建议您等到有足够的浏览器支持时,才在生产环境中使用它。 在使用 backdrop-filter 时,您应该记住的另一件事是性能。 在大量元素或大量网页上使用此属性会对性能产生负面影响。

您可以在 W3C draft 和 MDN documentation 中了解有关 backdrop-filter 属性的更多信息。

你能为这个属性的使用提出任何其他有趣的建议吗? 你计划如何在未来使用它呢? 请在评论中让我们知道。

第 10 段(可获 1.41 积分)

文章评论