新聞中心

創(chuàng)新互聯公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網站建設、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務,滿足客戶于互聯網時代的安康網站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴!
CSS 中提供了一個 opacity 屬性用來設置元素的透明度,它不僅對顏色有效,對圖像或者頁面中其它的元素也有效。其語法格式如下:
opacity: number;
其中 number 為一個 0~1 之間的浮點數(小數),用來表示元素的透明度,值越小則越透明(0 表示完全透明,1 表示完全不透明)。
另外,在使用 opacity 屬性時,還需要注意以下幾點:
- 當一個元素定義了 opacity 屬性,并且其值小于 1 時,那么它的子元素也會擁有同樣的透明度;
- 當一個元素定義了 opacity 屬性,并且其值小于 1 時,將會重新定義該元素默認的 z-index 屬性,如果其它的元素為非定位元素,那么該元素的堆疊級別將會高于其它元素;
- 如果定義的 opacity 屬性值超過了指定的范圍,那么則截取與之最相近的值,例如 1.5 將截取為 1。
【示例】使用 opacity 屬性設置元素的透明度:
運行結果如下圖所示:
圖:opacity 屬性演示
IE8 或者更早版本的 IE 瀏覽器不支持 opacity 屬性,若想要在這些瀏覽器中實現透明效果可以使用 filter 屬性,語法格式如下:
filter: alpha(opacity = number);
其中 number 的取值范圍為 0~100,值越小則越透明。
【示例】使用 filter 屬性設置元素的透明度:
運行結果如下圖所示:
圖:filter: alpha(opacity=x) 屬性演示
為了讓所有瀏覽器都可以實現透明效果,您可以同時定義 opacity 和 filter 兩個屬性,如下所示:
p {
opacity: 0.5;
filter: alpha(opacity=50);
}
網站欄目:CSS透明度(opacity)
網站URL:http://www.dlmjj.cn/article/dpdsdod.html


咨詢
建站咨詢
