今天在做一個登錄界面的時候，由于視覺給的頁面背景圖片太鮮艷亮眼，導(dǎo)致頁面中間的登錄表單框很不顯眼，效果很差。就想到了做成毛玻璃的效果，現(xiàn)在分享出來，大家一起看看吧。
頁面結(jié)構(gòu)如下：
由于之前用過CSS filter屬性，在屬性值中使用blur(
Exciting!這種方法似乎可行，但是效果卻不是所期望的，login-box也被模糊了！原因如下：
應(yīng)用了filter:blur(
重慶分公司
重慶分公司
.login-box::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(10px) contrast(.8);
z-index:-1;
}并設(shè)置如下背景樣式：
.wrap-box ,.login-box::before{
background:url('/assets/login_bg.jpg') 0 / cover fixed;
}效果達(dá)成如下：
感謝大家的閱讀，希望大家收益多多。
本文轉(zhuǎn)自： https://blog.csdn.net/buttonChan/article/details/79889372
推薦教程：《CSS教程》
標(biāo)題名稱：手把手教你CSS如何實現(xiàn)毛玻璃效果
分享網(wǎng)址：http://weahome.cn/article/cgcjcj.html
