使用css实现一个毛玻璃效果

最新推荐文章于 2025-06-21 23:05:52 发布

原创最新推荐文章于 2025-06-21 23:05:52 发布 · 770 阅读

CC 4.0 BY-SA版权

文章标签：

在前端开发中，你可以使用CSS的backdrop-filter属性来实现毛玻璃效果。这个属性允许你对位于元素背后的区域应用图形效果，比如模糊或亮度调整。以下是一个简单的例子，展示如何使用backdrop-filter来创建一个毛玻璃效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毛玻璃效果</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://example.com/your-image.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .glass-effect {
    width: 300px;
    height: 200px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
  <div class="glass-effect">
    毛玻璃效果
  </div>
</body>
</html>

在这个例子中，.glass-effect类定义了一个具有毛玻璃效果的元素。backdrop-filter: blur(10px);是这行代码中最重要的部分，它应用了10像素的模糊效果到元素背后的区域。background: rgba(255, 255, 255, 0.3);给元素添加了一个半透明的白色背景，这有助于在模糊效果上增加一些亮度。text-shadow属性给文本添加了一些阴影，使其在模糊背景上更易阅读。

请注意，backdrop-filter属性在一些较旧的浏览器中可能不受支持。在使用之前，请确保你的目标浏览器支持这个属性，或者考虑使用回退方案。