CSS3实现毛玻璃效果
程序员文章站
2022-04-10 08:25:51
思路用before实现，给div添加一个before伪类，背景与大背景相同，大小也一致，使用z-index放在div的下面，然后使用filter: blur实现背景模糊，再用margin移动边缘泛白部分即可。div的背景设置为灰色透明......
思路
用before实现，给div添加一个before伪类，背景与大背景相同，大小也一致，
使用z-index放在div的下面，然后使用filter: blur实现背景模糊，再用margin移动边缘泛白部分即可。
div的背景设置为灰色透明
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毛玻璃效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
min-height: 100vh;
background: url(girl.jpg) fixed 0 / cover;
}
.t1 {
display: block;
position: relative;
width: 400px;
height: 200px;
font-style: italic;
font-size: 34px;
letter-spacing: 3px;
line-height: 140%;
color: rgb(61, 172, 28);
padding: 30px;
/* background: hsla(0, 0%, 100%, .6); */
background: rgba(255, 255, 255, .5);
/*HSLA (H,S,L,A) 的参数说明：
H：Hue (色调)。0 (或 360) 表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation (饱和度)。取值为：0.0% - 100.0%
L：Lightness (亮度)。取值为：0.0% - 100.0%
A：Alpha 透明度。取值 0~1 之间。*/
overflow: hidden;
border-radius: 20px;
z-index: 100;
}
.t1::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -10;
filter: blur(10px);
margin: -50px;
background: url(girl.jpg) fixed 0 / cover;
}
</style>
</head>
<body>
<div class="t1">
歪比巴卜歪比巴卜歪比巴卜歪比巴卜歪比巴卜歪比巴卜
</div>
</body>
</html>
本文地址：https://blog.csdn.net/Here_Endless/article/details/109581222