今天在用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明显偏红色多点,求大神解答下
这个没问题, 父子div颜色偏差是因为
透明背景颜色叠加
导致的body 底色是深红色的,上面
wrap
叠加了一层透明白色,此时看上去是偏白的浅红色。然后
wrap
上面再叠加了一层透明白色,此时子div 看上去就是偏白色了,而两个子元素之前的margin
部分还是之前父元素的偏白浅红色。因此导致了你看的这种偏差。