Html 仅CSS不透明度目标背景图像？

我有这个CSS

.jumbotron {
  background: url('/background.svg');
  opacity: 0.5;
}

但是我希望不透明度只针对背景图像。目前，它的目标是整个jumbotron，因此字体等也会褪色

我试过了

.jumbotron {
  background: url('/background.svg');
  background: opacity: 0.5;
}

及

但两者都不起作用。

来自：

没有CSS属性background opacity，但是您可以通过插入一个伪元素来伪造它，该伪元素的规则不透明度与后面元素的确切大小相同

.jumbotron::after {
  content: "";
  background: url(/background.svg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

正如伊舍伍德在评论中提到的，也许你必须设置

.jumbotron {
  position: relative;
}

---

设置不透明度：1用于其他类似jumbotron字体的元素。

请参见此，您需要将背景设置为伪元素（

：before

/

：before

：after），并且仅对该伪元素使用不透明度-注意，您可以设置

z-index:-1到这个伪元素抱歉我不明白。得到什么：之前还是之后。。。我当前的代码是第一个示例，我需要做什么？这不起作用，因为一般不透明度已设置为0.5。@Wavemaster使整个页面的背景为background.svg，而不是Jumbotrony您可能需要首先执行
.jumbotron{position:relative}
。
.jumbotron {
  position: relative;
}