css3实现毛玻璃效果
作者:互联网
- css3实现毛玻璃效果
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .bg { background: url('./images/1.jpg'); display: flex; justify-content: center; } .normal { width: 300px; height: 200px; background: rgba(255, 255, 255, .7); } .g-filter { width: 300px; height: 200px; background: rgba(255, 255, 255, .7); filter: blur(6px); } .g-backdrop-filter { width: 300px; height: 200px; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); } </style> </head> <body> <div class="bg"> <div class="normal">Normal</div> <div class="g-filter">filter</div> <div class="g-backdrop-filter">backdrop-filter</div> </div> </body> </html>
标签:css3,rgba,效果,height,filter,width,background,毛玻璃,255 来源: https://www.cnblogs.com/wjxIT666/p/15924481.html