本篇文章給大家分享的是有關(guān)如何實(shí)現(xiàn)CSS毛玻璃效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),天心網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:天心等地區(qū)。天心做網(wǎng)站價(jià)格咨詢:028-86922220

今天在做一個(gè)登錄界面的時(shí)候，由于視覺給的頁面背景圖片太鮮艷亮眼，導(dǎo)致頁面中間的登錄表單框很不顯眼，效果很差。就想到了做成毛玻璃的效果，現(xiàn)在分享出來，大家一起看看吧。

頁面結(jié)構(gòu)如下：

<p class="wrap-box"><!--最外層包裹框，背景圖片很鮮艷亮眼position:fixed-->
	<p class='login-box'><!--登錄表單框部分position:fixed-->
        </p>
</p>

由于之前用過CSS filter屬性，在屬性值中使用blur(<blur_size>)函數(shù)可以起到毛玻璃效果，所以我有2個(gè)思路來實(shí)現(xiàn)突出登錄表單框的效果：

• 對(duì)wrap-box使用filter:blur(<blur_size>);，然后將login-box的z-index設(shè)置為比父元素大使之浮在上層，使頁面中除了登錄表單框部分都是模糊的。

Exciting!這種方法似乎可行，但是效果卻不是所期望的，login-box也被模糊了！原因如下：

應(yīng)用了filter:blur(<blur_size>);的元素的所有子孫元素都會(huì)被模糊處理（不是因?yàn)槔^承），即使子孫元素脫離了該元素的文檔流也不能避免。

• 只對(duì)login-box背后部分模糊處理。解決方案是在login-box下層加一個(gè)與之重疊的元素，對(duì)此元素應(yīng)用filter:blur(<blur_size>);，可以選擇用偽元素：

.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á)成如下：

以上就是如何實(shí)現(xiàn)CSS毛玻璃效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：如何實(shí)現(xiàn)CSS毛玻璃效果
轉(zhuǎn)載來源：http://vcdvsql.cn/article30/peicso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、Google、網(wǎng)頁設(shè)計(jì)公司、域名注冊(cè)、電子商務(wù)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)