近來Windows Vista的毛半透明效果一直受到界內同行的爭相模仿。小弟不才，也來發表下自己的拙見。
首先準備兩張背景圖片，一張為正常圖片，另外一張表現為正常圖片的模糊效果。
利用css裡面對背景的定義，將正常圖片設定成為body節點的背景（注意body的margin必須設定為0，不然模糊的圖片和正常的圖片會有位置位移），並且設定background-attachment的屬性為fixed。
接下來在需要應用毛半透明效果的圖片上設定樣式，將模糊圖片設定為需求節點的背景，同樣設定background-attachment的屬性為fixed（需求節點的位置最好為絕對位置）。
這樣模仿Windows Vista的毛半透明效果就基本完成。
-------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<div class="glass"></div>
<div style="width:3000px;height:3000px;"></div>
</body>
</html>
-------------------------------------
PS：暫時不支援IE6以下版本，如果各位要使用，back.jpg為原背景，glass.jpg自己把原背景PS下成磨砂玻璃的，大小跟原圖一樣吧。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
