关于css rgba的问题

发布于
2019-10-08

今天在用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>

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

css html

html5 css3 javascript

阅读 2.6k

2 个回答

得票最新

Justin

1.4k41232

发布于
2019-10-08

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