设置内嵌背景图像时保留CSS背景属性

Question

我试图弄清楚为什么在设置内联背景图片时所有其他背景属性都无效。

外部CSS：

background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url("http://lorempixel.com/1400/900/");

结果：

但是当添加内联背景图像时，渐变属性似乎被忽略。

内联CSS

<div class="intro-img" style="background-image: url('http://lorempixel.com/1400/900/')">

结果：

Answer 1

您实际上用

覆盖了您的背景属性

background-image: url('XXX')

您可以通过将渐变添加到内联样式

来解决此问题

另一个解决方案是使用另一个元素/伪元素来处理渐变

＆＃13;

＆＃13;

#test, #test2 {
  width: 600px;
  height: 400px;
}

.is-overlayed {
position: relative
}
.is-overlayed::after {
  content: '';
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.text {
  color: #fff;

}
.above-overlay {
  z-index: 1;
  position: relative;
}

＆＃13;

<div id="test" class='is-overlayed' style='background-image:url("http://lorempixel.com/1400/900/")'>
<p class='text above-overlay'>ABOVE OVERLAY</p>
<p class='text under-overlay'>UNDER OVERLAY</p>
</div>

＆＃13;

＆＃13;

＆＃13;