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

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

舟山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

<!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>

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

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

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

容器層：

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

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

毛玻璃層：

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

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

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

.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中怎么實現(xiàn)毛玻璃效果

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

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

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

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

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

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

當(dāng)前標(biāo)題：CSS中怎么實現(xiàn)毛玻璃效果
路徑分享：http://muchs.cn/article28/igspjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、小程序開發(fā)、搜索引擎優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容