您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)如何實(shí)現(xiàn)CSS毛玻璃效果,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話(huà)不多說(shuō),跟著小編一起來(lái)看看吧。
今天在做一個(gè)登錄界面的時(shí)候,由于視覺(jué)給的頁(yè)面背景圖片太鮮艷亮眼,導(dǎo)致頁(yè)面中間的登錄表單框很不顯眼,效果很差。就想到了做成毛玻璃的效果,現(xiàn)在分享出來(lái),大家一起看看吧。
頁(yè)面結(jié)構(gòu)如下:
<p class="wrap-box"><!--最外層包裹框,背景圖片很鮮艷亮眼position:fixed--> <p class='login-box'><!--登錄表單框部分position:fixed--> </p> </p>
由于之前用過(guò)CSS filter屬性,在屬性值中使用blur(<blur_size>)函數(shù)可以起到毛玻璃效果,所以我有2個(gè)思路來(lái)實(shí)現(xiàn)突出登錄表單框的效果:
Exciting!這種方法似乎可行,但是效果卻不是所期望的,login-box也被模糊了!原因如下:
應(yīng)用了filter:blur(<blur_size>);的元素的所有子孫元素都會(huì)被模糊處理(不是因?yàn)槔^承),即使子孫元素脫離了該元素的文檔流也不能避免。
.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)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。