画像の後ろに透かし画像を入れるCSSのサンプル

言葉でうまく説明できないのですが、当サイトで使用している以下のような表現の実装方法です。

この画像だとどうなっているかわかりにくいですが、メイン画像を外すとこんな感じになっています。

後ろに拡大してぼかした画像を表示しています。
これをCSSで表現する方法を説明していきます。

実際の設定を見るのが一番早いと思うので、まずCSSのサンプルを紹介します。

HTML

<div class="ArticleDetail_MainImage_Div">
	<div class="ArticleDetail_MainImage_Back" style="background-image:url([画像のパス])"></div>
	<div class="ArticleDetail_MainImage_Back_Black_Layer"></div>
	<div class="ArticleDetail_MainImage" style="background-image:url([画像のパス])"></div>
</div>

CSS

/* ※説明において重要でないスタイル指定は省いています。 */

/* 全体のDIV */
.ArticleDetail_MainImage_Div {
    overflow: hidden;    /* 透かし画像のArticleDetail_MainImage_Divからあふれた部分を表示しない */
    height: 400px;       /* 高さ。好みに合わせて調整。 */
    position: relative;  /* メイン画像、透かし画像、黒っぽくするためのHTML要素を重ねて表示するために必要 */
}

/* 後ろの透かし画像のスタイル */
.ArticleDetail_MainImage_Back {
    background-size: cover;       /* BackgroundImageを要素を覆うように(長辺を基準に)表示 */
    background-position: center;  /* BackgroundImageの表示位置。中央を基準に表示 */
    height: 400px;
    filter: blur(5px);            /* 画像のぼかし具合 */
}

/* 後ろの画像を黒っぽくすためのHTML要素 */
.ArticleDetail_MainImage_Back_Black_Layer {
    /* 親要素を覆うように表示するための設定 */
    position: absolute;  
    top: 0px;          
    right: 0px;
    bottom: 0px;
    left: 0px;
    
    /* 背景を黒くする。
     * 完全に黒くすると透かし画像が見えなくなるので、透明度を0.8に設定 */
    background-color: rgba(0,0,0,0.8);
}

/* メイン画像のスタイル */
.ArticleDetail_MainImage {
    /* 画像のサイズ。
     * 長辺が収まるように拡大し、縦横比を保って表示。 */
    background-size: contain;
    background-position: center;
    
    /* 親要素からの絶対位置を指定。
     * これを指定しないと、裏の透かし画像の下に表示されてしまう。 */
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    margin: auto; /* 親要素内の中央に表示 */
}

処理解説

全体概要

このCSS設定は色々な要素とCSS設定が複合していて少し複雑です。
なので、まずは全体としてどのような構成にになっているのかを見ていきましょう。

まず、このパーツは大きく3つのHTML要素から構成されています。
・背景のぼかし画像
・ぼかし画像を黒っぽくするための要素
・メイン画像

これらの要素を重ねることで、全体を構成しています。

この3要素をさらにArticleDetail_MainImage_DivというDIV要素で囲っています。

要素の重なりについて

このパーツは3つのパーツを重ねて表示することによって構成されています。
しかし、HTML要素と言うのは通常重ねて表示することができません。
普通に表示したら次のようになってしまいます。

この重なりを表現するためにposition:absolute、relativeを使用しています。

まず、透かし画像を配置します。
次に背景画像を黒っぽくする要素を配置します。
このままだと上下に並んでしまうので、position:absoluteを使います。
この設定は、親要素内からの絶対位置で表示を指定することができます。

css

position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;

この設定は図にすると以下のような感じになります。

こうすることで要素を重ねて表示することができます。

メイン画像も同じ要領で重ねています。

css

position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;

画像のサイズについて

メイン画像、背景画像どちらも画像の設定はbackground-imageで設定しています。
background-imageで設定した画像をどのような大きさで表示させるかは、background-size、background-positionのスタイルで設定しています。

画像の表示方法は大きく内接リサイズと外接リサイズが存在します。
言葉で説明するよりも図と見た方がわかりやすいと思います。

今回のパーツでは、背景画像は外接リサイズ、メイン画像は内接リサイズで表示しています。

背景画像の設定は以下にようになっています。

css

background-size: cover;        /* 外接リサイズ */
background-position: center;   /* 中央に表示 */

メイン画像の設定は以下のようになっています。

css

/* 画像のサイズ。
 * 長辺が収まるように拡大し、縦横比を保って表示。 */
background-size: contain;     /* 内接リサイズ */
background-position: center;  /* 中央に表示 */

background-positionを設定しないと以下のように画像がずれてしまいます。

色々な要素が絡み合っていて複雑ですが、一つ一つを分解して考えれば意外と簡単です。