CSS 中的背景模糊

引言

我们可以创建背景模糊图像，这能使网页对用户更具吸引力。我们可以借助 backdrop-filter 属性来实现这一点。在本文中，我们将学习如何在网页中模糊背景图像，以及实现这一目标的方法。

如何在 CSS 中创建背景模糊？

在了解 backdrop-filter 属性之前，让我们先了解一下创建背景图像模糊的方法。如果我们添加背景模糊图像，它将提升网页的吸引力。如果我们为元素提供带有背景模糊图像，用户就能轻松地在所有元素中识别出该元素。有一些 CSS 滤镜属性可以让我们创建模糊效果。我们还可以使用背景模糊图像来创建网页上的 Photoshop 滤镜。这些滤镜也适用于图形、背景和边框。

借助滤镜的 blur() 函数，可以为源图像创建高斯模糊。我们需要设置半径值，它类似于高斯函数的标准差值，或者是在屏幕上相互混合的像素值数量。如果我们不提供任何参数，它将使用默认值，即零。

语法

示例

输出

说明

在上面的代码中，我们创建了背景模糊图像，其中 .blurry-background 类代表具有模糊背景效果的容器。::before 伪元素用于创建带有模糊背景图像的叠加层。filter: blur() 属性负责模糊效果，您可以调整值（例如 2px）来控制模糊的程度。

实际内容放置在 .content div 中，该 div 设置了较高的 z-index，以确保其显示在模糊背景之上。

什么是 Backdrop-Filter？

在 CSS 中，backdrop filter 属性允许我们将灰度、对比度、模糊等滤镜应用于背景或背景元素。这种效果仅应用于特定元素，而不是整个网页。此属性还提供了一些图形效果，例如元素背后的模糊或颜色偏移。我们还可以看到该特定区域的透明度反射。让我们通过一个例子来理解这一点。

示例

输出

说明

在上面的代码中，我们为 元素添加了样式，以在页面上居中容器并提供背景颜色。然后，我们还使用网格布局、内边距、圆角、背景颜色、背景滤镜和微妙的盒阴影样式化了 .container 元素。然后，我们使用背景颜色、圆角和居中文本样式化了每个 .content 元素。在此之后，我们通过设置每个 .content 元素的 backdrop-filter 属性值来应用不同的滤镜效果。然后，我们使用网格布局中的 gap 属性在 .content 元素之间增加了更多间距。

示例 2

输出

一个简单的例子

backdrop filter 属性的实现需要一个目标元素。应用滤镜属性后，所有效果都会应用于目标元素。让我们再举一个例子来理解这一点。

代码

输出

说明

在上面的代码中，我们创建了一个 .card 类，它代表卡片设计的容器。它使用 backdrop-filter: blur(10px) 属性来创建背景模糊效果。然后，我们还创建了 .card-image，它代表卡片顶部的图像区域。 .card-content 类为卡片内的内容提供了内边距。标题和卡片描述的样式由 .card-title 和 .card-description 类提供。

不使用 backdrop-filter 创建的过滤背景

我们也可以在不使用 backdrop 属性的情况下创建背景模糊图像。让我们通过一个例子来理解这一点。

示例

输出

说明

在上面的代码中，我们创建了一个 .card 类，它代表带有背景图像的卡片设计容器，背景图像使用 background-image 属性设置。有一个 .overlay 类，它创建了一个半透明的叠加层，位于背景图像之上。您可以调整不透明度和颜色以获得所需的效果。

Backdrop Filter 属性的语法

backdrop filter 属性有很多属性。让我们一个一个地理解它们。

这里，<filter-function> 表示用于改变网页外观的图形函数。

Backdrop Filter 的属性

让我们通过一些例子来讨论 backdrop filter 的属性。

• Blur();

借助这些属性，我们可以为背景图像提供叠加模糊属性。我们可以将模糊效果应用于框或其他任何元素。它会为您的内容创建高斯模糊。模糊半径有助于确定背景图像的模糊程度。

语法

示例

输出

说明

在这里，.blurred-image 类创建了一个带有背景图像的容器，该背景图像正在使用 blur() 滤镜函数进行模糊处理。您可以调整 10px 的值来控制模糊强度。

• brightness()

借助此属性，我们可以将线性乘数应用于各种输入图像。我们还可以使背景图像的亮度看起来更亮或更暗。我们可以通过将亮度值更改为低于 100 来降低亮度，将亮度值更改为高于 100 来提高亮度。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .brightened-image 类，它创建了一个带有背景图像的容器，并应用了 brightness() 滤镜函数来调整图像的亮度。我们还可以调整 1.9 的值来控制亮度级别。在此之后，我们还创建了 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• contrast()

借助此属性，我们可以调整输入图像的对比度。我们可以通过将亮度值更改为低于 100 来降低对比度，将亮度值更改为高于 100 来提高对比度。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .contrasted-image 类，它创建了一个带有背景图像的容器，并应用了 contrast() 滤镜函数来调整图像的对比度。我们还可以调整 1.8 的值来控制对比度级别。然后，我们还创建了 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• hue-rotate()

借助此属性，我们可以修改内容的色相。这完全取决于颜色，颜色围绕颜色圆圈。我们还可以选择色相旋转的角度。如果我们提供相似的角度值，它将显示所有冷色调，如果我们提供较大的角度，它将显示暖色调的色相。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .hue-rotated-image 类，它创建了一个带有背景图像的容器，并应用了 hue-rotate() 滤镜函数来调整图像的色相。我们还可以调整 90deg 的值来控制色相旋转的量。我们还创建了 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• saturate()

借助此函数，我们可以更改内容的饱和度效果。如果我们将饱和度值更改为低于 100%，它将使内容饱和度降低，如果值高于 100%，则会增加其饱和度。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .saturated-image 类，它创建了一个带有背景图像的容器，并应用了 saturate() 滤镜函数来调整图像的饱和度。我们可以调整 150% 的值来控制饱和度级别。然后，我们需要创建 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• grayscale()

借助此函数，我们可以使我们的网页变成灰度。如果我们将灰度值降低到 100% 以下，则灰度效果会降低。如果我们将灰度值增加到 100% 以上，它将显示内容的完整灰度。灰度的初始值为 0。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .grayscale-image 类，它创建了一个带有背景图像的容器，并应用了 grayscale() 滤镜函数来应用灰度效果。我们还可以调整 100% 的值来控制灰度级别。

• invert()

借助此函数，我们可以反转元素的颜色。我们还可以更改 invert 函数的值。如果我们将值设置为低于 100%，它将减少对元素的效果。如果我们将值设置为高于 100%，则效果将完全显现。如果我们应用 **backdrop invert()，则网页将看起来完全像一个黑体。**

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .inverted-image 类，它创建了一个带有背景图像的容器，并应用了 invert() 滤镜函数来反转图像的颜色。我们可以调整 100% 的值来控制反转级别。我们还创建了 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• sepia()

借助此函数，我们可以将输入图像转换为棕褐色。棕褐色意味着它使图像更温暖，即更黄或更棕。我们还可以设置棕褐色的值。如果我们将值设置为低于 100%，它将减少对元素的效果。如果我们将值设置为高于 100%，则效果将完全显现。棕褐色的默认值为 0。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .sepia-image 类，它创建了一个带有背景图像的容器，并应用了 sepia() 滤镜函数来应用棕褐色效果。我们可以调整 100% 的值来控制棕褐色效果的级别。我们还创建了 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• drop-shadow()

借助此函数，我们可以为给定元素创建阴影图像。阴影是输入图像的 alpha 蒙版的压缩版本，该蒙版经过特定的偏移和模糊处理。它类似于 box-shadow 属性。借助 filter 属性，我们可以提高硬件速度。

语法

我们可以使用以下语法来实现此属性。

drop-shadow(offset-x offset-y blur-radius color)

示例

输出

说明

在上面的代码中，我们创建了 .element-with-shadow 类，它创建了一个具有蓝色背景的方形元素。filter 属性应用 drop-shadow() 滤镜函数来添加阴影。我们还可以调整 4px 4px 8px rgba(0, 0, 0, 0.2) 的值来控制阴影的偏移、模糊半径和颜色。我们还创建了一个 .content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• opacity()

借助此属性，我们可以为图像提供透明度。如果我们将值设置为低于 100%，它将减少对元素的效果。如果我们将值设置为高于 100%，则效果将完全显现。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的示例中，我们创建了 .opaque-element 类，它创建了一个具有蓝色背景的方形元素。opacity 属性设置为 0.7，这意味着该元素将具有 70% 的不透明度。然后，我们创建了

.content 类，它提供了一个带有轻微叠加层和圆角的背景来显示内容。

• Url () - (用于应用 SVG 滤镜)

借助此属性，我们可以获取 XML 格式的文件地址。XML 文件定义了 SVG 滤镜以及特定滤镜元素的许多锚点标记。

语法

我们可以使用以下语法来实现此属性。

示例

输出

说明

在上面的代码中，我们创建了 .filtered-element 类，它创建了一个具有蓝色背景的方形元素。filter 属性使用 url(#custom-filter) 语法引用 ID 为 custom-filter 的 SVG 滤镜。然后，我们在 HTML 文档中创建了一个 SVG 元素，该元素与滤镜效果同步。在这种情况下，它将标准差为 5 的高斯模糊应用于该元素。

添加多个滤镜

我们还可以将背景滤镜属性应用于图像的不同部分。另外，我们可以将不同的滤镜属性应用于元素的背景。filter 属性的所有值对于 backdrop 属性的值都是有效的。我们可以利用硬件支持，因为浏览器引擎支持这些滤镜操作。

示例

输出

说明

在上面的代码中，我们创建了 .filtered-element 类，它创建了一个具有蓝色背景的方形元素。filter 属性应用了多个滤镜函数，包括 grayscale(50%)、brightness(80%) 和 contrast(120%)。这些滤镜按它们在列表中的出现顺序应用。grayscale(50%) 滤镜将颜色强度降低到 50%，创建灰度效果。brightness(80%) 滤镜将元素的亮度提高到 80%。contrast(120%) 滤镜将元素的对比度提高到 120%。