在bootstrap hero unit上调整背景图像的不透明度

Question

如何编辑我的CSS以调整英雄单位背景图像的不透明度而不影响英雄单位中文本等的不透明度？这是草稿网站（是的，我将支付正确版本的照片）：site

Answer 1

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

Answer 2

一种方法是将英雄文字移出英雄单位，并使用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中，但它可能位于英雄之外的任何容器中。