近來Windows Vista的毛玻璃效果一直受到界內同行的爭相模仿。小弟不才，也來發表下自己的拙見。

首先準備兩張背景圖片，一張為正常圖片，另外一張表現為正常圖片的模糊效果。

利用css里面對背景的定義，將正常圖片設置成為body節點的背景(注意body的margin必須設置為0，不然模糊的圖片和正常的圖片會有位置偏移)，并且設置background-attachment的屬性為fixed。

接下來在需要應用毛玻璃效果的圖片上設置樣式，將模糊圖片設置為需求節點的背景，同樣設置background-attachment的屬性為fixed(需求節點的位置最好為絕對定位)。

這樣模仿Windows Vista的毛玻璃效果就基本完成。

-------------------------------------

*{

margin:0px;

padding:0px;

}

body{

background-image:url(./back.jpg);

background-attachment:fixed;

}

div.glass{

background-image:url(./glass.jpg);

background-attachment:fixed;

position:absolute;

top:100px;

left:200px;

width:300px;

height:200px;

overflow:hidden;

}

-------------------------------------

PS：暫時不支持IE6以下版本，如果各位要使用，back.jpg為原背景，glass.jpg自己把原背景PS下成磨砂玻璃的效果圖，大小跟原圖一樣吧。

總結

以上是生活随笔為你收集整理的css毛玻璃效果白边_使用css模拟vista毛玻璃效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。