关于css rgba的问题

今天在用background的rgba时发现了一个之前从没碰到过的问题,大概情境是父div下面有两个子div,我给每个子div以及父div设置了相同的rgba,可是子div和父div显示的背景却是有偏差的,代码如下:

    html:
    <body>
        <div class="wrap">
            <div class="wrap_01">一个人</div>
            <div class="wrap_02">两个人</div>
        </div>
    </body>
css:
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                background: darkred;
            }
            .wrap{
                background: rgba(255,255,255,.92);
            }
            .wrap_01,.wrap_02{
                width:100%;
                height:40px;
                background: rgba(255,255,255,.92);
                margin-bottom:10px;
            }
        </style>

clipboard.png

background都设置了相同rgba,父div明显偏红色多点,求大神解答下

阅读 2.6k
2 个回答

这个没问题, 父子div颜色偏差是因为透明背景颜色叠加导致的
body 底色是深红色的,上面wrap叠加了一层透明白色,此时看上去是偏白的浅红色。
然后wrap 上面再叠加了一层透明白色,此时子div 看上去就是偏白色了,而两个子元素之前的margin部分还是之前父元素的偏白浅红色。因此导致了你看的这种偏差。

可以比较下opacity和rgba中的a的区别,如果想要wrap和子元素背景色一致,将wrap的透明度使用opacity去设置,子元素不设置rgba中的a或者a设置为1。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题