CSS, CSS2, 網頁設計

[CSS]上層不受下層的半透明背景影響

梅干2008/11/23
  首先這一個範例又要感謝來自內湖孫夫人,讓梅干桑有這一個機會能見識到此問題,而這位內湖的孫夫人希望背景半透明然後字又要能正常顯示,當直接將半透明的效果設在CSS中,Div子層的所有類別都要被繼承也一起變成半透明,為了讓子層不受到父層的影響,最後只好使出讓Div的類型變成絕對來跳脫這複雜的父子關係。
CSS設定:

div{
height: 267px;
width: 200px;
}

.bg{
 _filter:alpha(opacity=30);/*IE6*/
 filter:alpha(opacity=30);/*IE7*/
 -moz-opacity: 0.3;/*fireFox*/

 background-image: url(DSC08584.jpg);

 height:267px;

 width: 200px;
}

.txt{
position: absolute;
top:80px;
}

<body>….</body>
<div>
 
<span class="txt">丫有問一定有答,丫有聽不一定有懂。</span>
 
<div class="bg">丫有問一定有答,丫有聽不一定有懂。</div>
</div>


[範例預覽]

UAG軍規iPhone防摔殼