天天看點

html頁面透明度屬性,css透明度屬性是什麼?下例是一個半透明的效果:

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

html頁面透明度屬性,css透明度屬性是什麼?下例是一個半透明的效果:

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

效果圖:

html頁面透明度屬性,css透明度屬性是什麼?下例是一個半透明的效果:

示例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

效果圖:

html頁面透明度屬性,css透明度屬性是什麼?下例是一個半透明的效果:

更多web開發知識,請查閱 HTML中文網 !!