css中使顏色透明度的方法：首先創建一個HTML示例文件；然后創建一個div；最后通過“opacity:0.5;”屬性設置元素背景的透明度即可。

本教程操作環境：windows7系統、css3、thinkpad t480電腦。

CSS顏色透明度

一、設置元素背景透明度

opacity可以用來設置元素背景的透明度；它需要0~1之間的值

0表示完全透明(opacity:0)；

1表示完全不透明(opacity:1)；

0.5表示半透明(opacity:0.5)；

代碼演示：

opactity

.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

}

.box2{

position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

}

對比一下元素在設置同名之前的表現效果：

設置透明度的效果.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

z-index:10;

opacity:0.5;

}

.box2{

position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

z-index:5;

opacity:0.5;

}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

opacity:0.5;

}

表現效果：

二、瀏覽器兼容性問題：

opacity屬性在IE8及其以下的瀏覽器中不支持

為了實現透明效果，IE8及其以下的瀏覽器需要使用如下標簽代替：

alpha(opacity=透明度)

透明度選擇一個0~100之間的值

0表示完全透明(filter:alpha(opacity=0);)

100表示完全不透明(filter:alpha(opacity=100);)

50表示半透明(filter:alpha(opacity=50);)

這種方式支持IE6filter:alpha(opacity=50);

.box1{

position:relative;

width:200px;height:200px;

background-color: #00f;

z-index:10;

opacity:0.5;

filter:alpha(opacity=10);

}

.box2{position:absolute;

top:80px;

left:80px;

width:200px;

height:200px;

background-color:#0f0;

z-index:5;

opacity:0.5;

filter:alpha(opacity=50);}

.box3{

position:relative;

width:200px;

height:200px;

background-color:#f00;

z-index:1;

opacity:0.5;

filter:alpha(opacity=80)}

表現效果：在IE8及其以下的瀏覽器也可以很好地適應

因為filter:alpha(opacity=透明度) 這條元素寫在下面，所以 filter:alpha(opacity=透明度) 的優先級要高于 opacity:0.5; 的優先級。最終表現效果不是opacity:0.5

總結

以上是生活随笔為你收集整理的php 将颜色透明度,css中如何使颜色透明度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。