如何在CSS中模糊背景图像而不模糊内容？-css教程-PHP中文网

如何在CSS中模糊背景图像而不模糊内容？

Mary-Kate Olsen

发布： 2024-10-29 10:26:02

原创

321 人浏览过

How to Blur a Background Image in CSS Without Blurring the Content?

在保持内容清晰度的同时对背景图像进行 CSS 模糊

尝试在 CSS 设置中模糊背景图像时，通常会遇到内容（文本或其他元素）也变得模糊的问题。这就是 z-index 和伪元素的概念发挥作用的地方。

要模糊背景图像而不影响内容，可以采用以下方法：

创建背景容器：将背景图像包含在div或其他容器中，并为其分配一个类，例如“blur-bgimage”。
引入伪元素： 在“blur-bgimage”类中，添加一个伪类，例如：before。这会在容器后面创建一个继承背景图像的层。
模糊背景：使用 CSS 滤镜将模糊效果应用于伪元素。这将模糊继承的背景图像，而不影响内容。
覆盖内容：将内容放入“blur-bgimage”容器中，确保其具有更高的 z-index（例如，z-index：1）比模糊背景（z-index：0）。

下面是示例代码：

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}</code>

登录后复制

通过实现这种方法，您可以有效模糊背景图像，同时保持内容的清晰度，从而实现视觉上吸引人的网站设计。

以上是如何在CSS中模糊背景图像而不模糊内容？的详细内容。更多信息请关注PHP中文网其他相关文章！