javascript - 如何阻止子 div 继承父 div 的某些属性？

Question

我创建了一个 div，上面有一个图像:

.middleBlockDiv{
    content:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

我有一个子 div :

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}

如果我不将图像放入父 div，那么父 div 的 css 是这样的:

.middleBlockDiv{
        display: inline-block;
        background-color: rgba(70,130,180,1);
        float: left;
        z-index:2;
        opacity: 0.8;
        border: 4px solid white;
        border-radius: 30px 15px;
        clear:both;
    }

显示子 div，但是，如果我保留图像，则不会显示子 div。它位于 DOM 中，但未显示在屏幕上。

我想这可能是因为继承，因为子 div 可能继承了图像。

如何阻止子 div 从父 div 继承图像？

fiddle :http://jsfiddle.net/8xyk2ucb/

Answer 1

正如用户@HaukurHaf 向我提到的使用背景图像而不是内容，这帮助我解决了我的问题。

所以我的代码是这样的:

.middleBlockDiv{
    background-image:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}