当前位置：首页 > CSS

css制作毛玻璃

2026-01-28 19:06:05CSS

使用 backdrop-filter 属性

在 CSS 中，backdrop-filter 是实现毛玻璃效果的核心属性。该属性允许对元素后面的区域应用滤镜效果，如模糊、亮度调整等。

.blur-effect {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

blur(10px) 表示模糊半径为 10 像素。background-color 使用半透明颜色增强效果。

css制作毛玻璃

兼容性处理

由于 backdrop-filter 的浏览器兼容性问题，可能需要添加前缀：

css制作毛玻璃

.blur-effect {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

结合伪元素增强效果

对于不支持 backdrop-filter 的浏览器，可以使用伪元素模拟毛玻璃效果：

.container {
  position: relative;
  overflow: hidden;
}

.blur-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

性能优化建议

毛玻璃效果可能影响页面性能，特别是在移动设备上。以下优化方法值得考虑：

限制模糊半径大小
减少应用毛玻璃效果的元素数量
在不需要动画效果时避免使用过渡

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-image: url('background.jpg');
    background-size: cover;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .glass-card {
    width: 300px;
    height: 200px;
    padding: 20px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>
  <div class="glass-card">
    <h2>毛玻璃效果</h2>
    <p>这是一个CSS实现的毛玻璃效果示例。</p>
  </div>
</body>
</html>