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。

之上

注意：正如迈克的评论所指出的，使用:before元素比使用:after元素要好得多，因为:after被放置在其他所有内容的顶部，需要很多z-index设置到其他元素来克服它（这可能会变得单调乏味）。除此设置之外，伪元素上的pointer-events:none也会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

下面是一个示例代码段，其中渐变和图像都是内联设置的。您可以将整个值存储为DB（或）中的字符串，同时设置内联样式（使用JS或后端程序）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: