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

最新推荐文章于 2023-09-14 17:32:17 发布

github_34514750

最新推荐文章于 2023-09-14 17:32:17 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 百度前端技术学院文章标签： css rega opacity

本文链接：https://blog.youkuaiyun.com/github_34514750/article/details/51065533

css 同时被 2 个专栏收录

20 篇文章

订阅专栏

百度前端技术学院

10 篇文章

订阅专栏

在ife任务7中，作者发现当在图片上添加半透明颜色层后，文字也会变得半透明。通过使用absolute定位和opacity属性，虽然可以实现透明效果，但会导致文字一起透明。解决方案是使用rgba()颜色，因为它允许独立设置元素的透明度，而opacity会影响整个元素的透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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直接就运用在了整个标签上，只能设定整个元素的透明值