简单的答案是把你的.jpg，并创建一个.png与它有你的不透明度已经应用。

一种方法是将你的英雄文本移动到英雄单元之外，然后使用position:relative将其放置在你想要的位置。

CSS

.hero-unit {
  background-image:url('..');
  height:300px;
  opacity: .5;
}

h1 {
  position: relative;
  top: -350px;
  left: 40px;
  color:#fff;
}

HTML

<div class="container">
  <div class="hero-unit">
  </div>
  <h1>Hello Hero Text</h1>  
</div>

Demo on Bootply
这个例子假设你的英雄文本包含在H1中，但它可以在英雄之外的任何容器中。

原来的帖子是一段时间前，但我最近有同样的问题，并不能得到它的底部，但它似乎与图像本身无关，但事实上，图像似乎被归类为背景图像.在给模板供应商“bootstrapmade.com”打了一个快速的支持电话后，他们指出这是调整器。“0”是没有不透明度（清晰图像），“1”和1是完全模糊的。为了让我的头周围，我发现它有助于了解什么是'不透明的意思，“缺乏透明度的质量”，所以'0'是完全缺乏透明度，和'1'是完全透明。小数点后进行调整，例如;透明度的一半是“0.5”。我希望这对任何有同样问题的人都有帮助。