先上效果圖：
寫博客不管是做筆記還是干啥，直接上源碼不行么，還不放效果圖，拆分成幾段誰慢慢看，慢慢理解去
自己動手，豐衣足食，上代碼：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>高斯背景模糊效果（毛玻璃）</title> <style> .box{ width: 750px; height: 400px; background: url('./img/timg.jpg') no-repeat 100% 100%; background-size: cover; position: relative; } .content{ height: 60%; width: 60%; background: white; position: absolute; left: 50%; top: 50%; margin-left: -30%; margin-top: -16%; border-radius: 4px; } /* filter是對該元素的模糊，因此對content添加並模糊偽元素，並定位到content的下層，而不是直接修改背景圖或content的樣式 */ .content::before{ content: ''; position: absolute; top:0;right:0;bottom:0;left:0; filter: blur(3px); margin:-21px; background: url('./img/timg.jpg') no-repeat 100% 100%; background-size: cover; opacity: .8; } .content p{ padding: 20px 15px; color: white; text-indent: 20px; font-size: 14px; line-height: 28px; letter-spacing: 1px; /* 清除子元素對父元素filter屬性值的繼承 */ filter: blur(0); } </style> </head> <body> <div class="box"> <div class="content"> <p>高斯模糊文字介紹的,高斯模糊文字介紹的高斯模糊,文字介紹的,高斯模糊文字介紹的高斯模糊。文字介紹的高斯模糊，文字介紹的--紅葉都楓了紅葉都楓了紅葉都楓了@163</p> </div> </div> </body> </html>
下一篇可以在‘毛玻璃效果’的基礎上做一些js的動態效果