溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用純CSS實(shí)現(xiàn)底層毛玻璃效果

發(fā)布時(shí)間：2022-01-20 14:54:55 來源：億速云 閱讀：96 作者：清風(fēng) 欄目：web開發(fā)

這篇“如何使用純CSS實(shí)現(xiàn)底層毛玻璃效果”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對于“如何使用純CSS實(shí)現(xiàn)底層毛玻璃效果”，小編整理了以下知識點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

　　毛玻璃背景是一個(gè)很常見的網(wǎng)頁樣式，想要實(shí)現(xiàn)，其實(shí)并不難，但經(jīng)過我在網(wǎng)上的搜索發(fā)現(xiàn)，大量實(shí)現(xiàn)方法都較為不規(guī)范，且把問題復(fù)雜化了（例如各種z-index屬性和position的定位）

　　現(xiàn)提供一個(gè)代碼很直白且實(shí)現(xiàn)效果良好的實(shí)現(xiàn)方案，改良自W3Schools

　　HTML部分

　　<!DOCTYPEhtml>

　　<htmldir="ltr">

　　<head>

　　<metacharset="utf-8">

　　<title>FrostedGlass</title>

　　<linkrel="stylesheet"href="frostedGlass.css">

　　</head>

　　<body>

　　<div>

　　<div>

　　<p>thisisFrostedGlass</p>

　　</div>

　　</div>

　　</body>

　　</html>

　　.mainHolder是主框體

　　.textHolder是毛玻璃區(qū)域

　　.p是浮于毛玻璃上的文字內(nèi)容

　　CSS部分

　　*{

　　box-sizing:border-box;

　　}

　　.mainHolder{

　　width:600px;

　　height:600px;

　　background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);

　　background-attachment:fixed;

　　background-position:center;

　　background-size:cover;

　　position:relative;

　　}

　　.textHolder{

　　width:100%;

　　height:200px;

　　position:absolute;

　　right:0;

　　bottom:0;

　　background:inherit;

　　overflow:hidden;

　　}

　　.textHolder::before{

　　content:'';

　　position:absolute;

　　top:0;

　　right:0;

　　bottom:0;

　　left:0;

　　background:inherit;

　　background-attachment:fixed;

　　filter:blur(4px);

　　}

　　.textHolder::after{

　　content:"";

　　position:absolute;

　　top:0;

　　right:0;

　　bottom:0;

　　left:0;

　　background:rgba(0,0,0,0.25);

　　}

　　p{

　　z-index:1;

　　color:white;

　　position:relative;

　　margin:0;

　　}

　　解決毛玻璃效果里最核心的問題：模糊效果不能影響字體，采用了偽元素::after于::before

　　值得注意的是，在p標(biāo)簽里的position屬性。設(shè)置為relative后，會將p從被遮擋狀態(tài)“提起來”。

　　另外，對于不同的瀏覽器內(nèi)核，filter的寫法會有些許不同。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

以上是“如何使用純CSS實(shí)現(xiàn)底層毛玻璃效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手