html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例
當我們在做網頁的時候,有時為了整體頁面搭配的美觀,需要設置層樣式為透明或者半透明,因為透明往往能產生不錯的網頁視覺效果。在使用的背景的頁面中,如果不設置頁面內容區為半透明狀態,突出不了背景的作用,也顯得不那么協調。用傳統的CSS實現背景半透明效果的方法是用兩個層,一個放文字,另一個做透明背景,但是透明濾鏡的效果會影響到里面的內容。如果只需要在IE下實現,是有更簡單的方法可以實現的。
CSS半透明屬性
兼容主流瀏覽器的CSS透明代碼:
.transparent_class?{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:?0.5;
opacity:?0.5;
}
上面的幾個屬性分別是:
①opacity: 0.5; 這是最重要的,因為它是CSS標準.該屬性支持Firefox, Safari和 Opera.
②filter:alpha(opacity=50); 這個是為IE6設的,可取值在0-100,其它三個0到1.
③-moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla瀏覽器。
④-khtml-opacity: 0.5; 這個為了支持一些老版本的Safari瀏覽器。
CSS透明度繼承問題
CSS的透明屬性涉及到一個繼承問題,當為父級元素設置透明度后,子元素將自動繼承其透明度,比如下圖的效果:
即使你又為子元素指定透明度為1也是無效的。
對于子元素是文字的情況,一般的解決方法是如果多少還能夠看清,就不管。另一個折中的方法是,為文本子元素指定一個相對更深的顏色。也就是說,當子元素繼承透明度后,所得到的文本顏色正好就是你想要的。前提是這個顏色還有加深的可能,和需要詳細的計算顏色和透明度的值。
還有“取消透明度繼承”的說法,這個說法是不太準確的,實際上沒有任何取消透明度繼承的方法。只能說,當想要實現“多個元素覆蓋,只讓指定的元素透明”時,可以使用的一些Hack。
還有一種不錯的實現方法:添加一個空元素作為透明層,和不想透明但是要實現覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個子元素使用position:absolute定位,實現覆蓋。具體解釋說明請點擊本鏈接
IE下實現半透明
HTML代碼:
??
背景為紅色(#FF0000),透明度20%。
總結
以上是生活随笔為你收集整理的html中如果设置颜色为半透明状态,CSS半透明属性介绍及代码实例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端学习(1833):前端面试题之nod
- 下一篇: CSS opacity - 实现图片半透