ife-task7:半透明颜色层上叠加文字，rgba()和opacity区别

ife的task7中遇到的问题：
在一张图片上加了一个半透明颜色层，但是在半透明颜色层上加上文字却也成了半透明

给html图片上叠加半透明颜色层，并且在半透明颜色层上叠加文字
使用absolute+opacity属性实现不透明度、
或者不用定位，直接就使用margin-top:一个负数，来定位，但这种不可取，除非明确知道跟top的距离。

<div id="part-5">
    <img src="part_5\part_05_1.png">
    <div id="p5pic2">
    <div>
  </div>

  #part-5{
    width: 1280px;
    height: 350px;
    border: 1px solid black;
    padding: 0px;
    position: relative;
  }
  #part-5 img{
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
  }
  #part-5 #p5pic2{
    width: 100%;
    height: 100%;
    margin: 0px;
    background-color: #cc7680;
    opacity: 0.2;
    top: 0px;
    position: absolute;
  }

上述方法在一张图片上叠加了红色透明层，就想加了滤镜一样，很好看
但是在图片上加了文字，却也跟着透明了。

若使用上述opacity方法，则背景透明，但是文字也跟着透明；若想文字不透明，应该用background: rgba(204,118,128,0.2);

 #part-5 #p5pic2{ width: 100%; height: 100%; margin: 0px; /*background-color: #cc7680; opacity: 0.2;*/ background: rgba(204,118,128,0.2); top: 0px; position: absolute; text-align: center; }

原因：
rgba(204,118,128,0.2)中让父元素是rgba颜色，这其中有一个alpha通道（css中新加的）。
alpha通道：设定透明度的时候需要单独对每一个设定，可以特定对元素的某个属性设定透明值
opacity：opacity直接就运用在了整个标签上，只能设定整个元素的透明值