Javascript 如何阻止子div继承某些父div属性？

我创建了一个有图像的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;
}

我有一个儿童部门：

.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:

默认情况下继承CSS规则-因此使用“级联”名称。要得到你想要的，你需要使用！重要：

例如：

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

---

正如用户@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;
}

---

你可以把你的HTML添加到问题中，或者更好的是添加一个正在工作的HTML。我想这不是一个继承问题，而是由于您正在添加的

内容：

。希望这篇帖子对您有所帮助。[makville发布][1][1]：为什么要使用content属性将图像插入dom？你为什么不把它用作背景图像呢？我认为你做不到，现在就试试吧，谢谢@HaukurHaf，非常好用，谢谢@HaukurHaf。如果你想回答这个问题，我很乐意接受：）