为英雄封面的背景图像 CSS 添加不透明度 [重复]

【问题标题】：Add opacity to background-image CSS for hero cover [duplicate]为英雄封面的背景图像 CSS 添加不透明度 [重复]
【发布时间】：2019-03-22 18:25:21
【问题描述】：

我想知道是否可以取消我的第二个 div/类 opacity 并使用 hero 类上的 CSS 为图像添加不透明度？

.hero {
  background-image: url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
  background-size: cover;
  position: relative;
  height: 500px;
}

.hero .opacity {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
}

<div class="hero">
  <div class="opacity">
  </div>
</div>

【问题讨论】：

您的意思是要避免使用.opacity，而是直接在.hero 上对背景图像应用不透明效果？
没错。

标签： html css

【解决方案1】：

您可以使用多个背景图片，所有现代浏览器都是supported。

.hero {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),
      url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
  background-size: cover;
  color: white;
  position: relative;
  height: 500px;
}

&lt;div class="hero"&gt;Some content&lt;/div&gt;

【讨论】：

这很好用，只是如果我将内容添加到 div 以位于英雄图像的顶部，它实际上位于不透明层的后面。
啊，好吧，我没有意识到这是一个要求。在这种情况下，请参阅我的更新答案。