如何使子div成为＆＃34;不继承背景颜色＆＃34;从它的父亲div？

Question

我想在父亲元素和孩子元素之间做出不同的背景。

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

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

那不是我想要的。

我希望make child 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的默认背景是透明的，这就是出现红色的原因。您需要将子div的background-color替换为另一个。

MDN background-color docs州：

  

初始值：透明
  继承：否