溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS中怎么實現毛玻璃效果，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
<!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作為容器層，用來放置風景背景圖。
內部放一個div，作為毛玻璃的主體。
再放一個img，顯示天氣圖標。
容器層：
大小是圖片大小，把風景圖作為背景顯示，no-repeat。這里用到一個小技巧，將background-attachment設成fixed，不隨元素滾動，讓子元素繼承了本層的背景后，子元素就變成了一個viewport，移到哪兒就看到背景的哪兒。。。額。。。這句話理解起來有點困難，碼農缺乏語言表達也是一大苦惱。
.container{
width: 287px;
height: 285px;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}毛玻璃層：
這里的關鍵技巧就是background:inherit，直接使用了父元素的背景，和父級的background-attachment:fixed可完成從相機看世界的各種牛逼效果。
本文的的毛玻璃是全景，當然可以上半部或者下半部，或者其他位置，這就看出inherit和fixed最牛的地方了。
CSS Code復制內容到剪貼板
.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)進行兼容。
ie8下的效果，繼續將就吧。
最后就是天氣圖標：
需要把圖標浮在最上層某個位置上，個人不太喜歡使用飛在天上的absolute來解決人間的俗世問題，元素內的定位用margin來作就足夠了，雖然會在頁面的回流上有影響，但不會產生足夠的影響，好處就是父元素的位置和大小的變動產生后遺癥會盡可能小，讓absolute來弄，那就頭大了，人間的問題就讓人間的來解決吧。
圖標的position設成relative，是為了讓它浮在最上面，因為relative的要比默認static的顯示層級高。
定位就用margin來做，當然前提是要把它弄成block級元素，否則就然并卵了。
.weather{
width:80px;
height:80px;
margin-top: -200px;
margin-left: 100px;
position: relative;
display: block;
}看完上述內容，你們掌握CSS中怎么實現毛玻璃效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
