两个大小不一重合的元素设置相同的rgba,展示效果却不一样

问题
给两个元素设置了相同的rgba背景色,有设置透明度,发现展示的效果不一样

.box {
            width: 300px;
            height: 300px;
            background-color: rgba(211,211,211,.5);
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: rgba(211,211,211,.5);
        }

<div class="box">
       <div class="box1">
       </div>
   </div>

解决
方式一(如果只能得到rgba的颜色,则推荐这种方式)
增加一个白底的盒子包裹着

.box {
            width: 300px;
            height: 300px;
            background-color: rgba(211,211,211,.5);
        }
        .box0 {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: rgba(211,211,211,.5);
        }

<div class="box">
        <div class="box0">
            <div class="box1"></div>
        </div>
    </div>

方式二
如果颜色固定的话,直接使用16进制就能解决,但是如果颜色得到的设置的就是rgba,则将rgba转换为16进制,不过会出现一些偏差