本文详细介绍了如何使用CSS3的backdrop-filter属性实现毛玻璃效果，包括在顶层和底层的应用，通过代码结构展示了具体实现方法。
毛玻璃效果在顶层
代码结构
<style>
.contain{
width:100%;
height:500px;
background:url(图片地址)
//使用渐变背景也可以出现毛玻璃效果
//background-image: linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172))
}
.son{
width:100px;
height:100px;
background:rgba(255,255,255,.3); //颜色必须有透明度，使用red等颜色词或rgb不能出现毛玻璃
backdrop-filter:blur(5px)
}
</style>
<body>
<div class='contain'>
<div class='son'></div>
</div>
</body>
//元素或者父元素的背景必须部分透明，或者没有颜色毛玻璃效果在底层
代码结构
<style>
.contain{
width:100%;
height:500p
最低0.47元/天 解锁文章
扫一扫
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
