CSS背景图像没有显示，但是当我将样式应用于开发工具中的元素时？

Question

我正在使用Webpack加载图像以用作背景图像。当我使用CSS应用它时，div会使用除了背景图像之外的任何属性..

<div class="row" style="background-image:url(2769a294377fdc1af5fa011c9bedc6a0.jpg);">
  <div class="container">
  </div>
</div>

当我在Chrome开发工具中检查时，正在加载图像（我可以直接访问它），如果我从.cover中复制样式并将其应用到Developer Tools中的element.style，则样式将应用为预期..

当我直接将它应用于元素时，它甚至会覆盖样式......

这有效，但显然不可持续。

如果我内联样式，它可以工作..

!important

但如果我尝试制作样式表背景{{1}} ...

它用空白背景覆盖背景图像！

为什么会这样？

Answer 1

尝试将！important 添加到您的背景元素中。所以......

.cover {
  background-image: url(../assets/images/childcarer_background.jpg) !important;
  background-size: cover;
  min-height:500px;
}