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

最新推荐文章于 2024-08-10 14:29:40 发布

daique1908

最新推荐文章于 2024-08-10 14:29:40 发布

阅读量395

点赞数

文章标签：过滤器 java css python 人工智能

本教程介绍了CSS背景过滤器，一个新兴的技术，用于创建模糊和视觉效果。目前在Safari（带前缀）和某些实验性浏览器中可用。内容涵盖了如何使用backdrop-filter属性，组合多个过滤器，以及通过SVG实现更复杂的过滤效果。虽然在生产环境中使用仍有限，但它预示着未来过滤器效果在网页设计中的潜力。

摘要由CSDN通过智能技术生成

过滤器过滤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()函数添加过滤器似乎暂时无法在任何浏览器中正常工作。但是，一旦正确实施，该图像应如下所示。