html中如果设置颜色为半透明状态,css中如何使颜色透明度变化？

css中如何设置颜色透明度？使颜色透明度变化？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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);)

这种方式支持IE6

filter: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

更多web前端知识，请查阅 HTML中文网 ！！