css - 设置内联背景图像时保留 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')

您也可以通过将渐变添加到内联样式来修复它

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

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

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