实践
opacity
opacity：x，css3 中有 opacity 设定透明度，其数值在 [0,1] 范畴内, 当数值为 0 时即为全透明，而 1 为不通明，opacity 实用于整个元素（包含其内容）。
background
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>
写在前面
本文章思路来自 MAD 与 CSDN，感激以上站点与作者提供的常识分享，特此总结知识点与案例，文章可分割作者后转载。后续我会更新更多好玩乏味的案例与知识点，欢送关注珍藏点赞。山水有相逢，咱们下期再会~~