在許多網(wǎng)頁的特效中，我們經(jīng)常看到有一些圖片或者背景是透明的。通過背景透明再加上css其他特效就可以達(dá)到關(guān)燈開燈的效果。在許多其他特效中都可以見到背景透明。這些效果都是如何實(shí)現(xiàn)的呢？今天我給大家分享下今天所學(xué)到的知識，如何把背景變?yōu)橥该鳌?br> 讓背景透明的方法有許多。下面我來介紹其中的四種方法，這四種方法各有利弊。我會向大家一一介紹。好了，廢話不多說，上教程。
1.opacity屬性與filter屬性
IE瀏覽器的寫法是filter:alpha(opacity=value); value的取值是0-100，數(shù)值越小越透明。為了兼容其它瀏覽器建議再加上opacity這個屬性。他的寫法是opacity: .value；value的值是0-1，數(shù)值越小越透明。這個方法用起來很容易，在你需要的元素上加上這個兩個屬性就可以了。
.box1{ width:400px; height:400px; opacity: .5;filter:alpha(opacity=50); margin:0 auto}
<div class="box1">
<h1>透明方法1</h1>
<div class="box1_a">
<img src="img/img6.png" />
<h2>WEB初學(xué)者 WEB初學(xué)者 WEB初學(xué)者</h2>
</div>
</div>
效果如上圖所示。但是這個方法有個缺點(diǎn)。給父元素添加這兩個屬性時，父元素下面的所有子元素都會變得透明，這樣一來當(dāng)我想讓文字不透明時這個方法就不適用了。
2.position方法
用這個屬性并不是用position把圖片做成透明的，這個屬性是用來定位的它也沒有屬性值可以用來做圖片的透明度，那為什么會提到這個方法呢？我們在需要透明的元素后面在添加一個空元素。再用第一種方法把這個空元素做成透明的元素，再用position這個屬性把這個空元素定位到我們需要透明元素的層下面就可以達(dá)到我們所需要的效果。
.box2{width:400px; height:400px;margin:0 auto; position:relative}
.box2 .box_3{ width:400px; height:400px; opacity: .5;filter:alpha(opacity=50); position:absolute; top:0; z-index:-1; background-color:#FF0}
<div class="box2">
<h1>透明方法2</h1>
<div class="box2_a">
<img src="img/img6.png" />
<h2>WEB初學(xué)者 WEB初學(xué)者 WEB初學(xué)者</h2>
</div>
<div class="box_3"></div>
</div>
效果如圖上圖所示，這個方法是兼容性最好的一種方法也是想讓哪里透明就讓哪里透明。但是這個方法因?yàn)橐玫絧osition這個屬性，所以寫代碼時很容易就出現(xiàn)錯誤。
3.直接插入一張透明的背景或者透明圖片
這個方法沒啥要解釋的很簡單，就是圖片原本就是透明的。插入進(jìn)去就可以了。但是要用到這個方法就要和UI的小姐姐打好關(guān)系讓他幫你把圖片PS成透明的，不然就要自己想自己慢慢摳圖吧。
.box3{width:400px; height:400px;margin:0 auto; background:url(images/png32.png) no-repeat}
<div class="box3">
<h1>透明方法3</h1>
<div class="box3_a">
<img src="img/img6.png" />
<h2>WEB初學(xué)者 WEB初學(xué)者 WEB初學(xué)者</h2>
</div>
</div>
效果如上圖所示，透明圖片分為：.gif,.png8,.png24,.png32;建議使用.png8格式。其他24和32格式在IE6及其一下版本時不支持的。
4.css3新增屬性rgba
這個方法和第一種差不多就是在元素上使用background:rgba()這個屬性。這里就不再演示了，優(yōu)點(diǎn)就是知識把當(dāng)前元素透明，其他不動。但是這個方法還是有一些瀏覽器時不兼容的。
個人推薦還是第二種方法，雖然麻煩點(diǎn)但是兼容性時最好的。
