将另一个背景图像添加到已经具有内联背景图像的元素

Question

我遇到了在 HTML 中内联设置背景图像的问题（因为它是来自数据库的动态图像 src），但我仍然想添加半透明渐变 在现有背景图片的顶部。

不使用 JS 是否完全可行？

div {
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)); /* I need this to be added **on top** of the existing background image */
}

<div style="background-image: url(//lorempixel.com/1920/1080/nature/)"></div>

Answer 1

不，如果已经通过内联样式设置，则不能通过 CSS 添加另一个 background-image。但是您可以使用伪元素并将其放在 div.

之上

注意： 正如 Mike 在评论中指出的那样，使用 :before 元素比使用 :after 元素要好得多，因为 :after 置于其他一切之上，需要对其他元素进行大量 z-index 设置才能克服它（这可能会变得乏味）。除了这个设置 pointer-events:none 伪元素也有帮助。

div {
  position: relative;
  width: 200px;
  height: 200px;
}
div:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
  pointer-events: none;
}
div * {
  position: relative;
}
a, p, span {
  color: red;
}

<div style="background-image: url(//lorempixel.com/1920/1080/nature/)">
  <a href='#'>Some link for hit test</a>
  <p>Some paragraph to test the color being affected by gradient on top or not</p>
  <span>Some span to test the color being affected by gradient on top or not</span>
</div>

可以使用 CSS 将多个背景图像添加到单个元素，但与其他属性一样，声明不是附加的，因此图像和渐变都应通过 CSS 设置（或）由后端。

下面是一个示例片段，其中渐变和图像都设置为内联。您可以将整个值作为字符串存储在数据库中（或）在设置内联样式（使用 JS 或后端程序）时附加它。

div {
  position: relative;
  width: 200px;
  height: 200px;
}
a, p, span {
  color: red;
}

<div style="background-image: url(//lorempixel.com/1920/1080/nature/), linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2))">
  <a href='#'>Some link for hit test</a>
  <p>Some paragraph to test the color being affected by gradient on top or not</p>
  <span>Some span to test the color being affected by gradient on top or not</span>
</div>

将另一个背景图像添加到已经具有内联背景图像的元素

Adding another background image to an element that already has an inline background image

html

css

background-image