如何使子div从其父div“不继承背景色”？

Question

我想让父亲和孩子之间有不同的背景。

小提琴：http : //jsfiddle.net/cbcL6osm/

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

那不是我想要的。

我希望让子div仅显示其背景图像，而不继承其父div的背景颜色。

以下是小提琴的代码：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的默认背景是透明的，这就是为什么显示红色的原因。您需要background-color将子div的替换为另一个。

MDN background-color文档指出：

初始值： transparent
继承： no