背景画像を画面いっぱいに設定する際、上に乗る文字などを読みやすくするために背景画像を暗くすることがあると思いますが、写真を加工せずにCSSで暗くしようとしてopacityを使うと、中の要素に文字などを含めている場合、文字を含めた全体が暗くなってしまいます。

そこで、opacityを使わずに、内包する要素を含まずに背景画像のみをCSSで暗くする方法をご紹介します。

HTML

背景を指定するdiv.bgの中に、position: absolute;で浮かせるボックスdiv.boxを作ります。

<div class="bg">
  <div class="box">
    <h1>HEADDING</h1>
    <p>Lorem ipsum</p>
  </div>
</div>

CSS

.bgに背景画像をひき、position: relative;を指定します。
.bgのbefore要素にRGBaの記述で黒を重ねます。
（RGBaの最後のアルファ値には0〜1で透明度を指定します。）

.boxを浮かせることで、内包するh1やpは暗くなりません。

.boxは浮かせると.bg::beforeの大きさがなくなってしまうため、content: ' ';を指定。さらに、position: absolute;の他にtop / bottom / left / right 各プロパティに対し 「0」を指定することで、.bgと同じ大きさに広げます。

html,body{
  height: 100%;
  margin: 0;
}
.bg{
	background: url(https://glatchdesign.com/wp-content/uploads/2016/02/mountain0209.jpg) no-repeat center;
	background-size: cover;
	position: relative;
	height:100%;
}
.bg::before{
	/* 透過した黒を重ねる */
	background-color: rgba(0,0,0,0.5);
	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
.box{
  position: absolute;
  width: 100%;
  text-align: center;
}
h1,p{
  color: #fff;
}

hoverだけ暗くするなどの時にも応用できますね。