过滤器过滤css_畅玩明天CSS：背景过滤器

过滤器过滤css

在本教程中，我们将研究一个名为Backdrop Filter的新兴CSS玩具。

背景滤镜提案在很大程度上受到Apple设计语言的影响，尤其是在最新的iOS和macOS界面中看到的模糊透明的模糊背景 。 您会在Dock， 上下文菜单和通知中心中注意到它。

目前，背景过滤器是在CSS过滤器第2级下烘焙的，在撰写本文时， 它仅可在带有-webkit-前缀的Safari 9中工作，并且通过启用“实验性Web平台功能”下的Chrome和Opera 才能正常工作。 chrome://flags菜单。

使用背景过滤器

Backdrop-filter包含在CSS Filters规范中，因此与filter属性类似，它继承了所有熟悉的过滤功能，例如grayscale() ， blur()和sepia() 。 唯一的区别是它将影响所选元素下方的元素。

要使用它，我们至少需要两个元素； 第一个元素将成为目标，而第二个元素将位于其下方。 例如：

<div id="first-element" class="filter"></div>
<a id="second-element" href="https://example.com"><img src="images/name.jpg" alt=""></a>

在不透明度较低的第一个元素中设置背景，这样我们就可以添加一个带有backdrop-filter的函数，例如grayscale()可以将背景变成黑白。

.filter {
    -webkit-backdrop-filter: blur(10px); /* Safari 9+ */
    backdrop-filter: blur(10px); /* Chrome and Opera */
    background-color: rgba(255, 255, 255, 0.3);
}

请注意，在以下演示中，尽管添加了blur()函数， .filter元素的后代（在这种情况下为按钮）仍然清晰。 这是backdrop-filter优于filter属性的一个优点； 所有后裔都受到影响的地方

注意 ：此处图片取自“ 如何在Paint Tool SAI中创建一个启发小红帽的童话插图”教程。

组合多个过滤器

在单个声明中组合两个过滤器函数也是可以接受的。 例如，保留我们的blur() ，但添加grayscale()函数以去除颜色的背景。

.filter {
    -webkit-backdrop-filter: grayscale() blur(10px); /* Safari 9+ */
    backdrop-filter: grayscale() blur(10px); /* Chrome and Opera */
    background-color: rgba(255, 255, 255, 0.3);
}

您可以添加到组合中的其他功能包括：

• brightness() ：接受从0到无穷大的数字或百分比。 小于1任何数字（例如0.8 ）将使元素变暗，指定大于1任何数字将使元素变亮。
• contrast() ：接受一个数字和百分比，与brightness()函数相似，不同之处在于此函数定义了元素对比度。
• invert() ：此函数生成背景的相反或负色。 同样，该函数也接受数字和百分比作为值。

带有SVG的高级过滤器

如果您无法从这些默认功能中找到所需的效果，则始终可以通过SVG添加更高级的滤镜。 创建具有唯一ID的SVG过滤器，并将其保存在.svg文件中：

<filter id="morph">
<feMorphology id="morph-value" operator="erode" in="SourceGraphic" radius="3"/>
</filter>

像这样用url()函数引用过滤器。

.filter {
    -webkit-backdrop-filter: url(../images/filter.svg#morph); /* Safari 9 */
    backdrop-filter: url(../images/filter.svg#morph); /* Chrome and Opera */
}

不幸的是，使用url()函数添加过滤器似乎暂时无法在任何浏览器中正常工作。 但是，一旦正确实施，该图像应如下所示。

要建什么？

网络上有许多实际的实现方式，我们可以用背景装饰器而不是装饰来应用背景滤镜。 一个很好的例子是Medium，它在完全加载图像之前模糊了帖子图像的封面以及帖子内容中的图像。

现实世界中的另一个很好的例子是Facebook，它在用户同意完全查看图像之前模糊具有成熟，不适当或令人不安的内容的图像。

结论

多年来，CSS已通过新规范得到增强，使设计人员能够在Web上构建更具吸引力的界面。 变换，转场和动画都发挥了作用，现在背景滤镜也在我们身边。

尽管在生产环境中使用背景过滤器可能还为时过早，但这些演示表明，我们很快就能以更简化的方式将过滤器效果应用于元素，并最终减少对大量JavaScript或Canvas库的依赖。 在此之前，请关注Webkit博客以获取有关此项目和其他项目的更新。

翻译自: https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314

过滤器过滤css