首頁 » 網頁設計 » CSS » [CSS]上層不受下層的半透明背景影響

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>

[範例預覽]

引用網址：※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝。
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。
,