css - 如何使子div从其父div变为 "do not inherit background color"？

Question

我想在父元素和子元素之间设置不同的背景。

fiddle :http://jsfiddle.net/cbcL6osm/

我的意思是，如果您看到子 div，它的背景颜色是继承自父 div 的红色。

那不是我想要的。

我想让子 div 只显示它的背景图像，而不从它的父 div 继承背景颜色。

下面是fiddle的代码:http://jsfiddle.net/cbcL6osm/

html :
<div class="father">
    test
    <div class="child">
        test
    </div>
</div>


css :
.father {
    width: 100px;
    height: 100px;
    background-color:red;
    position:relative;
}

.child {
    position:absolute;
    top:20px;
    left:20px;
    width: 60px;
    height: 60px;
    background:url('https://www.google.co.kr/logos/doodles/2014/leo-tolstoys-186th-birthday-5756677508825088.2-res.png') center;
    background-size:30px 30px;
    background-repeat:no-repeat;
    border:thin solid;
}

Answer 1

实际上，重点是你的错误前提。

子div不继承父div的背景色

div 的默认背景是透明的，这就是出现红色的原因。您需要将子 div 的 background-color 替换为另一个。

MDN background-color docs状态:

Initial value: transparent
Inherited: no