我們在使用半透明的過程中，會發現半透明層內的文字也被加上了透明效果，有的時候和我們的設計相背離，如以下效果：
代碼:
1.<style type="text/css">
2..box{ width:600px; height:150px; background:#F00;filter:alpha(opacity=50);opacity:0.5; }
3.</style>
4.<div class="box">這里的字也變了顏色</div>
效果1
這里的字也變了顏色
實際上這是css的繼承機制，內部的文字繼承了外部的div的半透明，如果你的網頁只需要兼容IE,那么你的代碼可以這樣來寫，在文字的外部再加一個div，設置此div的position屬性為relative，這樣IE認為包含文字的div脫離了標準流，樣式就不再繼承
代碼2
1.<div class="box">
2.<div style="position:relative">這里的字在IE下沒有變顏色</div>
3.</div>效果2
效果2
如果你的網頁只打算兼容ie,那么沒問題，父框給他個relative就行了可，但是在其他瀏覽器里的效果并不隨你所愿，只能構造兩個div來模擬效果了,原理是使同級的透明的容器和不透明的容器顯示重疊，如下代碼
代碼3
1.<div style="position:relative">
2.<div class="box"></div>
3.<div style=" position:absolute;color:#000; left:0px; top:0px">這里的字體顏色是不是能兼容所有的瀏覽器呢</div>
4.</div>效果3
效果3
這里的字體顏色是不是能兼容所有的瀏覽器呢，我在測試的過程中發現，使用
margin-top:-150px想讓他重疊，卻發現還是有問題，只能通過absolute來設置
這里的字體顏色是不是能兼容所有的瀏覽器呢，我在測試的過程中發現，使用
margin-top:-150px想讓他重疊，卻發現還是有問題，只能通過absolute來設置總結:總的來說使用半透明還是比較麻煩的，如果是非必須我們還是換成其他方法，比如做半透明的圖片做容器背景，
posted on 2009-06-10 21:47
周銳 閱讀(625)
評論(0) 編輯 收藏 所屬分類:
CSS 、
HTML