HTML構造を変更せずに疑似要素「::before」で背景マスクを追加する

この記事は以前にご紹介した「背景画像を透過風にする」と同じ効果を得るものです。

課題

下のようなケースでは、背景画像を薄くしてコンテンツを通常通りに表示させたいことがあります。

コンテンツ　コンテンツ　コンテンツ　

透過による対策

単純に背景画像要素を透過すると子要素まで透過が継承されてしまうので、コンテンツも薄くなってしまいます。

コンテンツ　コンテンツ　コンテンツ

<div class="backImage">
<div class="frontContents">
コンテンツ　コンテンツ　コンテンツ
</div>
</div>

コンテンツ　コンテンツ　コンテンツ

</div>

.backImage{
	width:					50%;
	height:					200px;
	background-image: 		url(../../HPImage/yuu0054-009_640x427.JPG);
	background-repeat: 		no-repeat;
	background-position: 	top center;
	background-size:		cover; 	
    opacity:				0.5;        /* 子要素 .frontContents に継承される */
}
.frontContents{
	padding:				20px;
	color:					#000;
}

.backImage{

width: 50%;

height: 200px;

background-image: url(../../HPImage/yuu0054-009_640x427.JPG);

background-repeat: no-repeat;

background-position: top center;

background-size: cover;

opacity: 0.5; /* 子要素 .frontContents に継承される */

}

.frontContents{

padding: 20px;

color: #000;

}

背景画像要素に対してコンテンツ要素をabsoluteでかぶせる手もありますが、レスポンシブなどで厄介な処理が発生しそうです。

疑似要素「::before」による透過マスクでの対策

これらを改善する一方法として、背景画像の疑似要素「::before」を利用してコンテンツとの間に透過マスクを挟む方法があります。
利点としてhtml構造はそのままで対応できます。

コンテンツ　コンテンツ　コンテンツ

<div class="layerImage">
<div class="frontContents">
コンテンツ　コンテンツ　コンテンツ
</div>
</div>

コンテンツ　コンテンツ　コンテンツ

</div>

.layerImage{
	width:					50%;
	height:					200px;
	background-image: 		url(../../HPImage/yuu0054-009_640x427.JPG);
	background-repeat: 		no-repeat;
	background-position: 	top center;
	background-size:		cover;
	position:               relative;     /* ::before の position:absolute; を有効にするため */
}
/* ▼ マスク用に追加 */
.layerImage::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0.5;
}
.frontContents{
	padding:				20px;
	color:					#000;
	position:				relative;       /* z-index 有効にするため */
	z-index:				1;              /* ※1 */
}