毛玻璃效果实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
background-image: url(img/微信图片_20200314215343.jpg);
}
.main {
height: 500px;
width: 80%;
backdrop-filter: blur(40px);
border-radius: 10px;
box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
0 0.9px 1.7px rgba(0, 0, 0, 0.179),
0 1.8px 3.5px rgba(0, 0, 0, 0.224),
0 3.7px 7.3px rgba(0, 0, 0, 0.227),
0 10px 20px rgba(0, 0, 0, 0.4);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="main">
哈哈哈
</div>
</body>
</html>