要实现一个毛玻璃效果，可以使用 CSS 的 backdrop-filter 属性。以下是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.blur {
width: 400px;
height: 300px;
background-image: url(image.jpg);
background-size: cover;
position: relative;
}
.blur::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(image.jpg);
background-size: cover;
filter: blur(10px);
opacity: 0.8;
z-index: -1;
}
</style>
</head>
<body>
<div class="blur"></div>
</body>
</html>
效果如下：
在上面的示例中，我们创建了一个名为 blur 的类，它定义了一个具有模糊效果的容器。我们使用 background-image 属性设置容器的背景图片，并使用 background-size: cover 来使图片自适应容器大小。
然后，我们使用 ::before 伪元素来创建一个与容器大小相同的叠加层。我们将相同的背景图片应用于该叠加层，并使用 filter: blur(10px) 属性给叠加层添加模糊效果。opacity 属性用于设置叠加层的透明度为 0.8，以实现毛玻璃效果。
最后，我们将 blur 类应用于一个 div 元素，以展示具有毛玻璃效果的图片。
请注意，backdrop-filter 属性在某些浏览器中可能不被支持或具有不同的兼容性。在使用时，请确保在目标浏览器上进行测试和兼容性检查。
扫一扫
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
