背景图片模糊效果
<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>