css透明度屬性是什麼?CSS透明度屬性是opacity屬性。下面本篇文章就來給大家介紹一下CSS 透明度屬性--opacity屬性。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

CSS 透明度屬性--opacity屬性
css opacity屬性用于設定一個元素了透明度級别,從0.0(完全透明)到1.0(完全不透明)。通過該屬性我們可以設定圖檔、文字、盒子模型等等的透明度。
文法:opacity: value|inherit;
屬性值:value:規定不透明度。從 0.0 (完全透明)到 1.0(完全不透明)。
inherit:應該從父元素繼承 opacity 屬性的值。
注釋:所有主流浏覽器都支援opacity屬性。IE8 以及更早的版本支援替代的 filter 屬性。例如:filter:Alpha(opacity=50)。
css opacity屬性 示例
示例1:
h1 {
margin: 10px 0;
font-size: 16px;
}
.test,.test2 {
width: 300px;
height: 150px;
padding: 10px;
}
.test {
background: #050;
}
.test2 {
margin: -120px 0 0 50px;
background: #000;
filter: alpha(opacity=50);
opacity: .5;
color: #fff;
}
下例是一個半透明的效果:
不透明度為100%的box 不透明度為50%的box
效果圖:
示例2:
function ChangeOpacity(x)
{
// Return the text of the selected option
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
{el.style.opacity=opacity;}
else
{alert("您的浏覽器不支援此示例!");}
}
從下面的清單中選擇一個值,以更改此元素的不透明度!
0.2
0.5
0.8
1
效果圖:
更多web開發知識,請查閱 HTML中文網 !!