将不透明度应用于图像

Question

我想对图像应用不透明度。问题是不透明度也适用于图像中的H1文本。如何将不透明度仅应用于图像？

HTML：

<div class="jumbotron quem-somos">
    <h1>Quem somos?</h1>
</div>

CSS：

.quem-somos {
  background-image: url('../images/capa8.png');
  opacity: 0.4;
}

上述代码的结果是：

Answer 1

我相信DrixsonOseña的答案完全符合你的要求。

但是如果由于某种原因你需要图像真正成为一个CSS背景图像（例如，你需要它重复或类似的东西），那么像下面的方法应该工作。与Drixson所做的类似，它使用绝对定位将两个元素叠加在一起，并为每个元素设置单独的不透明度。

div.wrapper {
  position: relative;
  width: 911px;
  height: 223px;
}
div.background {
  position: absolute;
  background-image: url('http://i.imgur.com/DQM3xDw.png');
  width: 911px;
  height: 223px;
  opacity: 0.4;
}
div.quem-somos {
  position: absolute;
  background: transparent;
}

<div class="wrapper">
  <div class="background"></div>
  <div class="jumbotron quem-somos">
    <h1>Quem somos?</h1>
  </div>
</div>

Answer 2

不透明度应用于您的容器。你应该把你的图像放在背景中。 尝试这样的事情：

<div class="jumbotron" style="position:relative;width:300px;">
  <img src="http://i.imgur.com/DQM3xDw.png" style="opacity:0.4;position:absolute;width:100%;" />
<h1>Quem somos?</h1>

更新： 图像宽度现在将依赖于它的容器宽度。