背景画像を透過風にする

現象

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

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

透過による対策

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

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

<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;
	-moz-background-size:	cover;
	background-size:		cover; 	
    filter: 				alpha(opacity=50);
    -moz-opacity:			0.5;
    opacity:				0.5;
}
.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;

-moz-background-size: cover;

background-size: cover;

filter: alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

}

.frontContents{

padding: 20px;

color: #000;

}

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

透過マスクによる対策

これらを改善する一方法として、背景画像とコンテンツの間に透過マスクを挟む方法があります。
背景画像を親要素に設定し孫要素にコンテンツを記述するのは上記と同じですが、親要素にみなし透過背景色を挟むのです。みなし透過背景色は background-color:rgba(red,green,blue,alpha); を利用します。

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

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

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

</div>

.layerImage{
	width:					50%;
	height:					200px;
	background-image: 		url(../../HPImage/yuu0054-009_640x427.JPG);
	background-repeat: 		no-repeat;
	background-position: 	top center;
	-moz-background-size:	cover;
	background-size:		cover; 	
}
.layerTransparent{
	background-color:		rgba(255,255,255,0.5);
	height:					200px;
}
.frontContents{
	padding:				20px;
	color:					#000;
}