HTML + CSS实现毛玻璃效果

什么是毛玻璃效果

毛玻璃效果，也称为玻璃模糊效果或模糊透明效果，是目前非常流行的设计新趋势。它通过在背景图像上应用模糊和透明度处理来创建一种类似于磨砂玻璃的视觉效果。这种设计可以增强界面的美观性，同时帮助突出前景内容，如文本、图标和控件。

毛玻璃效果分享图

Icon设计
App界面设计
Web界面设计
卡片设计

技术实现

在Web设计中，毛玻璃效果可以通过CSS来实现。主要通过backdrop-filter属性来实现模糊效果，并使用background属性设置透明度和颜色叠加。

backdrop-filter CSS属性用于在元素后面区域应用图形效果（如模糊或颜色偏移）。它对元素后面的所有内容都会产生影响，但不会影响元素本身。

首先，创建一个 HTML 文件，写入如下内容：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>毛玻璃效果</title>
</head>
<body>
    <!-- code goes here -->
</body>
</html>

为body添加下样式，定义背景为线性渐变，从#edc0bf（浅粉色）到#c4caef（浅蓝色）。

css 复制代码

body {
  padding: 4.5rem;
  margin: 0;
  background: #ebbd92;
  background: linear-gradient(90deg, #ebbd92 0,#a96aa2 58%);
}

现在基本的标签和样式做好了，接下来在 body 标签里创建一个卡片元素：

html 复制代码

<div class="card">
    <h3 class="card-title">毛玻璃效果</h3>
    <p>这是一个毛玻璃卡片效果</p>
    <a href="">Read more</a>
</div>

在卡片上应用毛玻璃效果之前，先添加一些排版样式，加入以下 CSS：

css 复制代码

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}

接下来将卡片card的背景设置为半透明，并使用 backdrop-filter: blur(10px); 来实现毛玻璃效果。

css 复制代码

.card {
  // ... 其他css属性
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

效果如图：看起来，好像没什么效果，别急，我们还需要在卡片后面加上一些元素，如一些形状或者图片，以便看到它的实际效果。

接下来在body添加一张图片

html 复制代码

<img class="bottom-img" src="./icon.jpg" alt="">

为bottom-img添加CSS样式，使其在合适的位置

css 复制代码

.bottom-img {
  position: absolute;
  width: 150px;
  top: .10rem;
  left: .5rem;
}

现在就能看到完整的毛玻璃效果 ，效果如图：

兼容性

使用backdrop-filter时，需要注意浏览器兼容性问题，虽然大多数现代浏览器支持这个属性，连禁用此属性的Firefox也在22年7月份也支持此属性,但在大多数旧版本浏览器中可能需要额外的兼容性处理或回退方案。此外，大量使用毛玻璃效果可能会影响页面的渲染性能，因此应谨慎使用，避免过度装饰。