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从父级继承图像？

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;
}

Answer 2

CSS规则默认继承 - 因此＆＃34;级联＆＃34;名称。为了得到你想要的东西，你需要使用！重要的是：

示例：

middleBlockDiv
{
  ....;
}
coinDiv
{
  // any rule you want here, followed by !important
}

如何阻止子div继承一些父div的属性？

2 个答案: