html页面透明度属性,css透明度属性是什么？

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

0.2

0.5

0.8

1

效果图：

更多web开发知识，请查阅 HTML中文网 ！！