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

Question

我有这个CSS

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

但我希望不透明度仅针对背景图像。目前它以整个超大屏幕为目标，因此字体等也会褪色。

我已经尝试了

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

和

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

但都不起作用。

Answer 1

来自CSS-tricks.com：

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

正如评论中提到的isherwood，也许你必须设置

.jumbotron {
  position: relative;
}

Answer 2

为jumbotron中的anoter元素设置不透明度：1，如字体等。