css - ブートストラップ ヒーロー ユニットの背景画像の不透明度を調整する

Question

css を編集して、ヒーロー ユニットのテキストなどの不透明度に影響を与えずに、ヒーロー ユニットの背景画像の不透明度を調整するにはどうすればよいですか? ここにサイトのドラフトがあります (はい、私は写真の適切なバージョンにお金を払います): サイト

Answer 1

1 つの方法は、ヒーロー テキストをヒーロー ユニットの外に移動し、使用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 に含まれていることを前提としていますが、ヒーロー以外の任意のコンテナーに含まれている可能性があります。