在許多網(wǎng)頁(yè)的特效中摇零，我們經(jīng)忱悖看到有一些圖片或者背景是透明的。通過(guò)背景透明再加上css其他特效就可以達(dá)到關(guān)燈開(kāi)燈的效果屯换。在許多其他特效中都可以見(jiàn)到背景透明编丘。這些效果都是如何實(shí)現(xiàn)的呢？今天我給大家分享下今天所學(xué)到的知識(shí)趟径，如何把背景變?yōu)橥该鳌?br> 讓背景透明的方法有許多瘪吏。下面我來(lái)介紹其中的四種方法癣防，這四種方法各有利弊蜗巧。我會(huì)向大家一一介紹。好了蕾盯，廢話不多說(shuō)幕屹，上教程。
1.opacity屬性與filter屬性
IE瀏覽器的寫(xiě)法是filter:alpha(opacity=value); value的取值是0-100级遭，數(shù)值越小越透明望拖。為了兼容其它瀏覽器建議再加上opacity這個(gè)屬性。他的寫(xiě)法是opacity: .value挫鸽；value的值是0-1说敏，數(shù)值越小越透明。這個(gè)方法用起來(lái)很容易丢郊，在你需要的元素上加上這個(gè)兩個(gè)屬性就可以了盔沫。
.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>
效果如上圖所示。但是這個(gè)方法有個(gè)缺點(diǎn)枫匾。給父元素添加這兩個(gè)屬性時(shí)架诞，父元素下面的所有子元素都會(huì)變得透明，這樣一來(lái)當(dāng)我想讓文字不透明時(shí)這個(gè)方法就不適用了干茉。
2.position方法
用這個(gè)屬性并不是用position把圖片做成透明的谴忧，這個(gè)屬性是用來(lái)定位的它也沒(méi)有屬性值可以用來(lái)做圖片的透明度，那為什么會(huì)提到這個(gè)方法呢角虫？我們?cè)谛枰该鞯脑睾竺嬖谔砑右粋€(gè)空元素沾谓。再用第一種方法把這個(gè)空元素做成透明的元素，再用position這個(gè)屬性把這個(gè)空元素定位到我們需要透明元素的層下面就可以達(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>
效果如圖上圖所示搏屑，這個(gè)方法是兼容性最好的一種方法也是想讓哪里透明就讓哪里透明。但是這個(gè)方法因?yàn)橐玫絧osition這個(gè)屬性粉楚，所以寫(xiě)代碼時(shí)很容易就出現(xiàn)錯(cuò)誤辣恋。
3.直接插入一張透明的背景或者透明圖片
這個(gè)方法沒(méi)啥要解釋的很簡(jiǎn)單亮垫，就是圖片原本就是透明的。插入進(jìn)去就可以了伟骨。但是要用到這個(gè)方法就要和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及其一下版本時(shí)不支持的。
4.css3新增屬性rgba
這個(gè)方法和第一種差不多就是在元素上使用background:rgba()這個(gè)屬性逛腿。這里就不再演示了稀并，優(yōu)點(diǎn)就是知識(shí)把當(dāng)前元素透明，其他不動(dòng)单默。但是這個(gè)方法還是有一些瀏覽器時(shí)不兼容的碘举。
個(gè)人推薦還是第二種方法，雖然麻煩點(diǎn)但是兼容性時(shí)最好的搁廓。
