css毛玻璃效果

/* 毛玻璃效果 */
.blur-container {
  /* 设置背景图片 */
  background: url('your-image-url.jpg') no-repeat center center;
  background-size: cover;
  /* 设置高度和宽度 */
  width: 100%;
  height: 400px;
  /* 添加毛玻璃效果 */
  backdrop-filter: blur(10px);
  /* 确保内容在容器内居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 设置透明度 */
  opacity: 0.9;
}

/* 可选：添加一些文本样式 */
.blur-container h1 {
  color: white;
  font-size: 2em;
  text-align: center;
}

解释说明：

1. 背景图片：通过 background 属性设置背景图片，并确保图片居中且覆盖整个容器。
2. 尺寸设置：使用 width 和 height 设置容器的大小。
3. 毛玻璃效果：通过 backdrop-filter: blur(10px); 实现毛玻璃效果，blur 的值可以根据需要调整模糊程度。
4. 居中显示内容：使用 display: flex;、align-items: center; 和 justify-content: center; 确保容器内的内容（如文本）居中显示。
5. 透明度：通过 opacity 设置整体透明度，使效果更柔和。

如果你想要应用这个效果，只需将上述代码应用到你的 CSS 文件中，并确保 HTML 结构中有对应的 .blur-container 元素。