CSS 实现磨砂玻璃(毛玻璃)效果样式

下面是详细讲解CSS实现磨砂玻璃效果的攻略。

磨砂玻璃效果的原理

磨砂玻璃效果是利用CSS中的虚化（blur）和不透明度（opacity）两个属性实现的。通过虚化属性可以让图片或背景模糊，不透明度属性可以让图片或背景变得透明，使之看上去就像磨砂玻璃一样。

实现方法一：使用背景模糊滤镜

1. 确定需要添加磨砂玻璃效果的区域，并将其设置为定位元素（position: relative或position: absolute）。
2. 给该定位元素添加background-image属性，并设置背景图片。
3. 设置背景图片的模糊滤镜，可以使用CSS3中的blur()属性，也可以使用兼容性更好的filter: blur()属性，具体代码如下：

.blur-bg {
  position: relative; 
  background-image: url(images/bg.jpg);
  background-size: cover;
  filter: blur(10px);
  -webkit-filter: blur(10px); /* 为了兼容 Webkit 内核的浏览器 */
}

1. 设置该元素的不透明度，使背景图片呈现出磨砂玻璃效果。通常情况下，透明度设置为0.7-0.9之间效果比较好，代码如下：

.blur-bg {
  position: relative; 
  background-image: url(images/bg.jpg);
  background-size: cover;
  filter: blur(10px);
  -webkit-filter: blur(10px); /* 为了兼容 Webkit 内核的浏览器 */
  opacity: 0.8;
}

实现方法二：使用::before伪元素和背景模糊滤镜

1. 在目标元素上面添加一个::before伪元素，并设置其position为绝对定位（position: absolute），并将其大小设置为和目标元素相等。
2. 给该::before伪元素添加background-image属性，并设置背景图片。注意，需要将其z-index属性设置为-1，使之处在目标元素背后。
3. 设置该伪元素的模糊滤镜和不透明度，具体代码如下：

.blur-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(images/bg.jpg);
  background-size: cover; 
  filter: blur(10px);
  -webkit-filter: blur(10px); /* 为了兼容 Webkit 内核的浏览器 */
  opacity: 0.8;
}

示例说明

下面是两个示例说明，分别演示了以上两种方法。

示例一：使用背景模糊滤镜

<div class="blur-bg" style="height: 600px;">
  <h1>磨砂玻璃效果示例</h1>
  <p>这是一段示例文字。</p>
</div>

.blur-bg {
  position: relative; 
  background-image: url(images/bg.jpg);
  background-size: cover;
  filter: blur(10px);
  -webkit-filter: blur(10px); /* 为了兼容 Webkit 内核的浏览器 */
  opacity: 0.8;
}

示例二：使用::before伪元素和背景模糊滤镜

<div class="blur-bg" style="height: 600px;">
  <h1>磨砂玻璃效果示例</h1>
  <p>这是一段示例文字。</p>
</div>

.blur-bg {
  position: relative;
}
.blur-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(images/bg.jpg);
  background-size: cover; 
  filter: blur(10px);
  -webkit-filter: blur(10px); /* 为了兼容 Webkit 内核的浏览器 */
  opacity: 0.8;
}

以上就是使用CSS实现磨砂玻璃效果的完整攻略。