<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url(1.jpg), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.box {
/* 重点设置下面两个属性 */
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(5px);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
color: #fff;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
</body>
</html>
标签：center,效果,100%,模糊,height,width,background,blur,背景图片 From： https://www.cnblogs.com/lb809663396/p/16832392.html