css背景模糊

/* CSS背景模糊效果示例 */

/* 1. 使用 background 和 backdrop-filter 实现背景模糊 */
.blur-background {
    width: 300px;
    height: 200px;
    background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果，10px 是模糊半径 */
    border-radius: 10px; /* 圆角 */
}

/* 2. 使用 ::before 伪元素实现背景模糊 */
.blur-background-alt {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
}

.blur-background-alt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('your-image-url.jpg') no-repeat center/cover; /* 设置背景图片 */
    filter: blur(10px); /* 背景模糊效果 */
    z-index: -1; /* 确保模糊背景在内容后面 */
}

解释说明：

1. 使用 backdrop-filter:

   • backdrop-filter 属性可以对元素的背景应用图形效果（如模糊或颜色偏移）。它不会影响元素本身的内容，只会影响背景。
   • 在这个例子中，.blur-background 类应用了一个半透明的白色背景，并对其背后的任何内容（包括父元素的背景）应用了模糊效果。

2. 使用 ::before 伪元素:

   • 通过 ::before 伪元素创建一个绝对定位的背景层，并对其应用模糊效果。这种方式适用于需要对特定背景图片进行模糊处理的情况。
   • z-index: -1 确保模糊背景位于内容的下方。