css毛玻璃效果

毛玻璃其實就是磨砂玻璃，能夠模糊的看清背後的風景，讓人感覺有種朦朧美，讓介面看上去有些層次感。

比如：

高大上啊，接下來肯定是眼饞手癢的過程。。。

當然，用ps搞乙個全景毛玻璃背景毫無疑問是最省事的，那接下來就沒啥事可幹了。

當然no no no了。

毛玻璃無疑就是種模糊了，少不了filter blur。

最終效果（chrome）：

天氣預報

嗯，也算是將就了。。。

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，作為毛玻璃的主體。

再放乙個img，顯示天氣圖示。

容器層：

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

.container

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

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

.frosted-glass

ie6~9的就用filter: progid:dximagetransform.microsoft.blur(pixelradius=4, makeshadow=false)進行相容。

ie8下的效果，繼續將就吧。

最後就是天氣圖示：

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

圖示的position設成relative，是為了讓它浮在最上面，因為relative的要比預設static的顯示層級高。

定位就用margin來做，當然前提是要把它弄成block級元素，否則就然並卵了。

.weather

**和資源：

戳

CSS毛玻璃模糊效果

class comment bk class top blur div class top class iconfont icon pinglun i li div comments div div div comment bk comments top blur top 毛玻璃模糊效果的精髓我覺得...

css實現毛玻璃效果

首先我們要知道實現毛玻璃效果的關鍵點 filter濾鏡 html 先寫乙個居中的div，並給body加上背景圖，以及居中的div設定背景顏色和透明度 body,html main 這裡我們不在此元素上寫filter屬性是因為其會導致內容的透明度改變，所以使用乙個可行的方法是為其新增偽元素效果如下圖 ...

css毛玻璃效果白邊 css3毛玻璃效果白邊問題

1 毛玻璃實現方法 css3 blur濾鏡實現 如下測試 blur webkit filter blur 10px chrome,opera moz filter blur 10px ms filter blur 10px filter blur 10px 需要注意目前火狐不支援，其他些瀏覽器，如f...