CSS多个背景图片，一个使用样式表，另一个使用内联

Question

我知道可能有两个背景图像，例如

#example1 {
  background-image: url(top.gif), url(bottom.gif);
  ...
}

但是我有一个图像是在元素本身上动态定义的，并带有一个内嵌style ="..."标签

<div class="grid-item grid-item-flagged" id='{{ album.id }}'
    style="background-image: url({{ album.photo_thumb.thumbnail.url }})"> 
</div>

并且我希望能够添加一个类，该类将在其顶部添加另一个背景图像。

.grid-item-flagged {
background-image: url("/media/round_outlined_flag_black_48dp.png");
}

问题是内联样式标签会覆盖样式表（我知道这是设计使然。）

我唯一想到的选择是将它们动态地动态内联添加（我想避免这种情况。）

Answer 1

我会使用伪元素来做到这一点。

#example1 {
  position: relative;
/*  ... */
}
#example1:before {
  content: '\a0';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: inherit;
  background-image: url(bottom.gif);
  z-index: 1;
}

Answer 2

您需要覆盖内联样式规则，可以使用!important来完成

#example1 {
  background-image: url(top.gif), url(bottom.gif) !important;
  ...
}

您可以看到指定顺序here

这是一张图片，可以更好地查看它