使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。注意：字体不会变透明。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
background-color:green;
width:500px;
}
.first{
opacity:0.1;
}
.second{
opacity:0.3;
}
.third{
opacity:0.6;
}
.rgba0{
background-color:rgb(0,128,0);
}
.rgba1{
background-color:rgba(0,128,0,0.1);
}
.rgba2{
background-color:rgba(0,128,0,0.3);
}
.rgba3{
background-color:rgba(0,128,0,0.6);
}
</style>
</head>
<body>
<h1>使用opacity</h1>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div >
<h1>opacity 1</h1>
</div>
<h1>使用RGBA</h1>
<div class="rgba1">
<h1>rgba(0,128,0,0.1)</h1>
</div>
<div class="rgba2">
<h1>rgba(0,128,0,0.3)</h1>
</div>
<div class="rgba3">
<h1>rgba(0,128,0,0.6)</h1>
</div>
<div class="rgba0">
<h1>rgb(0,128,0)</h1>
</div>
<p style="color:red;">注意：使用opacity属性字体会模糊，而使用grba属性字体会比较清晰。</p>
</body>
</html>
运行效果：
评论