css 毛玻璃效果

CSS 毛玻璃效果

毛玻璃效果是一种常见的视觉设计元素，能够为网页增添独特的质感和层次感。在CSS中实现毛玻璃效果主要依赖于filter: blur()属性以及背景的透明度设置。下面将几种实现方式，并提供代码示例。

解决方案

通过使用CSS中的backdrop-filter属性或结合filter: blur()与透明背景色，可以轻松实现毛玻璃效果。backdrop-filter是更现代的解决方案，支持对背景进行模糊处理而不影响前景内容；而传统的实现方式则需要借助伪元素和模糊滤镜来模拟效果。

方法一：使用 backdrop-filter 属性

这是最直接的方法之一，适合现代浏览器支持良好的场景。

css
.blur-box {
  width: 300px;
  height: 200px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px); /* 设置背景模糊程度 */
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  line-height: 2;
}</p>

<p>body {
  background: url('background.jpg') no-repeat center center/cover;
}

html</p>

<div class="blur-box">
  这是一个毛玻璃效果的盒子。
</div>

<p>

方法二：传统方式 - 利用伪元素

对于不完全支持backdrop-filter的老式浏览器，可以通过伪元素创建一个模糊层。

css
.box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
}</p>

<p>.box::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  filter: blur(20px);
  background: inherit;
  z-index: -1;
}</p>

<p>body {
  background: url('background.jpg') no-repeat center center/cover;
}

html</p>

<div class="box">
  这是一个使用伪元素实现的毛玻璃效果。
</div>

<p>

方法三：结合 SVG 滤镜

如果希望拥有更大的自定义空间，还可以考虑使用SVG滤镜来生成毛玻璃效果。

html

  
    
    
      
      
    
  
</p>

<div class="svg-blur" style="width:300px;height:200px;filter:url(#frosted-glass)">
  使用SVG滤镜实现毛玻璃效果。
</div>

<p>

以上三种方法各有优劣，开发者可以根据实际需求选择合适的方案。无论采用哪种方式，都应考虑到不同浏览器间的兼容性问题，确保用户体验的一致性。