透明往往能產(chǎn)生不錯的網(wǎng)頁視覺效果，先奉上兼容主流瀏覽器的CSS透明代碼:

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

上面的幾個屬性分別是: opacity: 0.5; 這是最重要的，因為它是CSS標(biāo)準(zhǔn).該屬性支持Firefox, Safari和 Opera. filter:alpha(opacity=50); 這個是為IE6設(shè)的，可取值在0-100，其它三個0到1. -moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla瀏覽器。 -khtml-opacity: 0.5; 這個為了支持一些老版本的Safari瀏覽器。 CSS透明度繼承問題 但CSS的透明屬性涉及到一個繼承問題，當(dāng)為父級元素設(shè)置透明度后，子元素將自動繼承其透明度，即使你又為子元素指定透明度為1也是無效的。 對于子元素是文字的情況，我的解決方法一般是如果多少還能夠看清，就不管。另一個折衷的方法是，為文本子元素指定一個相對更深的顏色。也就是說，當(dāng)子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是，這個顏色還有加深的可能，和需要詳細(xì)的計算顏色和透明度的值。 還有"取消透明度繼承”的說法，這個說法是不太準(zhǔn)確的，據(jù)我個人所知，沒有任何取消透明度繼承的方法。只能說，當(dāng)想要實現(xiàn)"多個元素覆蓋，只讓指定的元素透明”時，可以使用的一些Hack。 搜了一下，找到一個不錯的實現(xiàn)這種效果的方法 – 一個關(guān)于透明繼承度的問題，有興趣的朋友可以看看。原理很簡單，添加一個空元素作為透明層，和不想透明但是要實現(xiàn)覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個子元素使用position:absolute定位，實現(xiàn)覆蓋。 html代碼：

<div class="div3"><div class="div4"></div>這里文字圖片都沒透明度了 
<div class="div2">圖片</div> 
</div>

CSS代碼

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.div2{ width:100px; height:100px; background: url(./testbok.png)} 
.div3{ width:200px; height:200px; position:relative; margin-top:10px} 
.div4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}