css如何设置透明度不继承?

css中设置透明度的opacity属性具有继承性,有时透明度的继承效果会对我们网页效果有很大的影响,css该怎么设置不继承的透明效果呢?

css可以使用rgba设置透明度,此属性不具有继承性,使用此属性设置透明度就不会被继承。

rgba色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度

RGBA

说明:

RGBA(R,G,B,A)

取值:

R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha透明度,取值0~1之间。

说明:

RGBA记法

此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。

IE6.0-8.0不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理

示例代码:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

#88000000 的前两位数字控制透明度,取值16进制从00 -> FF(越小越透明),00表示完全透明,FF就是全不透明,后面六位是色值。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
width:450px;
height: 300px;
background-color: rgb(0, 0, 0,0.3);
}
</style>
</head>
<body>
<div class="div1"><div>不继承透明度</div></div>
</body>
</html>

效果图:

以上就是css如何设置透明度不继承?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读