如何在保持内容清晰的同时模糊 CSS 元素的背景图像？

在 CSS 中模糊背景图像而不影响内容

在 CSS 中，你可能会遇到这样的情况：想要模糊某个对象的背景图像元素而不影响其中的内容。以下是实现此目的的方法：

解决方案涉及创建一个继承父元素背景图像的伪元素 (:before)。然后将该伪元素绝对定位并给予模糊滤镜。通过将其 z-index 设置为 -1，它会出现在内容后面。

要实现此目的，请应用以下 CSS：

<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>

然后您可以使用 JavaScript 来切换类 (例如，“blur-bgimage”）将此 CSS 应用于所需的元素，根据需要模糊或取消模糊背景图像。

以上是如何在保持内容清晰的同时模糊 CSS 元素的背景图像？的详细内容。更多信息请关注PHP中文网其他相关文章！