読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

背景画像のオーバーレイ加工を手っ取り早く実現する

HTML&CSS WebDev

 背景画像に対してオーバーレイをかける処理というものがある。包含ブロックを新たに作ってそこで処理する方法もあるけれど、単に暗くするなどの簡単な処理ならば、before擬似セレクタ使って、簡単にできるので紹介したい。なお今回のやり方は、Narratively | Human stories, boldly told. でなされている方法に多くを依っている。
 今回この写真をサンプルに使う(パリが舞台の映画を見た後なので許して欲しい)。こいつがどうなるかを見たい方は写真の下にfiddleへのリンクを貼ったので、そこの結果で見ていただきたい。
https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg
Easy overlay for background-image - JSFiddle
 解説というほど述べることもないのだけれど、background-imageを指定した要素に対して、擬似セレクタbeforeを適用する、というのがカギ。そのbeforeで何を書くかは、スニペットみたいにして取っておいて適宜コピペすればいいのではないかと思う。もちろん、background-colorの値はケースに応じて変える。
 下で掲載したCSSからは省いたけれど、テキストを背景画像の上に載せる際は、ちゃんとz-indexを指定して文字通り「乗せ」なければならないことに気をつける。そうしないと、オーバーレイの影響をテキストが受けてしまう。

.content:before {
	z-index: 1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:rgba(0,0,0,0.6);
}
.content {
	position: relative;
	background-image: url(../images/sample.jpg);
	padding:4.6em 1.1em; 
	color: #fff;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

}