溫馨提示×

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

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

CSS中怎么實(shí)現(xiàn)毛玻璃效果

發(fā)布時(shí)間：2021-08-10 16:46:28 來(lái)源：億速云 閱讀：127 作者：Leah 欄目：web開發(fā)

CSS中怎么實(shí)現(xiàn)毛玻璃效果，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問題。


  2. <!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    </style>  
</head>  
<body>  
    <div class='container'>  
        <div class='frosted-glass'></div>  
        <img class='weather' src='cloudy.png'>  
    </div>  
</body>  
</html>

先搞一個(gè)div作為容器層，用來(lái)放置風(fēng)景背景圖。

內(nèi)部放一個(gè)div，作為毛玻璃的主體。

再放一個(gè)img，顯示天氣圖標(biāo)。

容器層：

大小是圖片大小，把風(fēng)景圖作為背景顯示，no-repeat。這里用到一個(gè)小技巧，將background-attachment設(shè)成fixed，不隨元素滾動(dòng)，讓子元素繼承了本層的背景后，子元素就變成了一個(gè)viewport，移到哪兒就看到背景的哪兒。。。額。。。這句話理解起來(lái)有點(diǎn)困難，碼農(nóng)缺乏語(yǔ)言表達(dá)也是一大苦惱。


  2. .container{   
       width: 287px;   
       height: 285px;   
       background-image: url(background.png);   
       background-repeat: no-repeat;   
       background-attachment: fixed;   
       overflow: hidden;   
   }

毛玻璃層：

這里的關(guān)鍵技巧就是background:inherit，直接使用了父元素的背景，和父級(jí)的background-attachment:fixed可完成從相機(jī)看世界的各種牛逼效果。

本文的的毛玻璃是全景，當(dāng)然可以上半部或者下半部，或者其他位置，這就看出inherit和fixed最牛的地方了。

CSS Code復(fù)制內(nèi)容到剪貼板


  2. .frosted-glass{   
        width: 287px;   
        height: 285px;   
        background: inherit;   
        -webkit-filter: blur(5px);   
        -moz-filter: blur(5px);   
        -ms-filter: blur(5px);   
        -o-filter: blur(5px);   
        filter: blur(5px);   
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);   
    }

上面的各種filter為了兼容各種瀏覽器版本，可度娘可谷歌，隨便啦。

ie6~9的就用filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false)進(jìn)行兼容。

ie8下的效果，繼續(xù)將就吧。

CSS中怎么實(shí)現(xiàn)毛玻璃效果

最后就是天氣圖標(biāo)：

需要把圖標(biāo)浮在最上層某個(gè)位置上，個(gè)人不太喜歡使用飛在天上的absolute來(lái)解決人間的俗世問題，元素內(nèi)的定位用margin來(lái)作就足夠了，雖然會(huì)在頁(yè)面的回流上有影響，但不會(huì)產(chǎn)生足夠的影響，好處就是父元素的位置和大小的變動(dòng)產(chǎn)生后遺癥會(huì)盡可能小，讓absolute來(lái)弄，那就頭大了，人間的問題就讓人間的來(lái)解決吧。

圖標(biāo)的position設(shè)成relative，是為了讓它浮在最上面，因?yàn)閞elative的要比默認(rèn)static的顯示層級(jí)高。

定位就用margin來(lái)做，當(dāng)然前提是要把它弄成block級(jí)元素，否則就然并卵了。


  2. .weather{   
     width:80px;   
     height:80px;   
     margin-top: -200px;   
     margin-left: 100px;   
     position: relative;   
     display: block;   
 }


看完上述內(nèi)容，你們掌握CSS中怎么實(shí)現(xiàn)毛玻璃效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

免責(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)容。

css
AI
助
手