关于html5:透明度opacity与rgba运用

3次阅读

共计 2019 个字符，预计需要花费 6 分钟才能阅读完成。

opacity：x，css3 中有 opacity 设定透明度，其数值在 [0,1] 范畴内, 当数值为 0 时即为全透明，而 1 为不通明，opacity 实用于整个元素（包含其内容）。

background：rgba（r,g,b,a）,r：红色值，g：绿色值，b：蓝色值，a：Alpha 透明度，取 [0,1] 之间，正整数为十进制 0~255 任意值，而百分比亦之同理。

opacity 在设定上会实用于整个元素，也就是说它不仅仅对本人失效，还会影响其子元素的透明度（不论其子元素透明度多少都会以设定 opacity 为主）

background 在设定上只对其自身起作用，不会被子元素所继承。起因在于，其通过 alpha 通道去操作元素，而非间接去影响 dom

展现

代码：

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
.box {
width: 40%;
height: 40%;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.content {
position: relative;
}

.common {
position: absolute;
width: 60%;
height: 60%;
border-radius: 15px;
background: #808080;
color: white;
height: 40%;
}
</style>
</head>

<body>
<div class=”box”>
<div class=”content”>
<p>Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems as well. With the development of science and technology, there are more and more people believe
that e-books will replace traditional books. Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems as well. With the development of science and
technology, there are more and more people believe that e-books will replace traditional books. Internet has been playing an increasingly important role in our daily life. It has brought a lot of benefits but has created some serious problems
as well. With the development of science and technology, there are more and more people believe that e-books will replace traditional books.
</p>
<!– opacity –>
<div class=”box1 common ” style=”top:10%; left:20%;opacity: 0.8;”>
<div>opacity</div>
<p>This box is opaque.That means you can see through it . Cool! </p>
</div>
<!– background –>
<div class=”box2 common” style=”top:60%; left:20%;background:rgba(0,0,0,0.5);”>
<p>RGBA</p>
<p>This box has an alphs value of 0.8. That means you can see through it . Cool! </p>
</div>
</div>
</div>
</div>
</body>

</html>