こんにちは！デザイナーの森田です。

ある日のサイト巡回中、とあるウェブサイトで気になる表現が使われている箇所がありました。

「ロゴの色が背景画像によって変わっている...！」

へぇ～こんなこともできるのね！とその時は心に留めておく程度でした。

その後、ウェブサイトリニューアルの案件にて、「何かインパクトのある要素を加えたい...」と考えていたところ上記のことを思い出し、実装することにしました。

あの表現はどのように行われていたのか

「あ、これ面白いな！」と思った時にすぐ調査すればよかったものの、コーディングのことはあまり深堀できておらず...どのサイトだったかも忘れてしまったため、キーワードでどうにか調査することに。

「css 重なった部分 色」...などで検索したところ、
「mix-blend-mode」というcss3のプロパティで行っていることがわかりました。

そもそもブレンドモード(描画モード)って？

ブレンドモード（またはレイヤーの合成モード、描写モード）とは、デジタル画像編集およびコンピュータグラフィックス（CG）の分野において、2つのレイヤーが互いにどのように合成されるかを決定するための設定である。
※引用：ブレンドモード-Wikipedia

Photoshopなどのグラフィックツールでは、レイヤーパネルから設定できる機能ですね。
重なり合う要素に対しての描画を指定できます。

mix-blend-modeの値一覧

mix-blend-modeプロパティで使える16種類の値はこちらです。

さっそくmix-blend-modeを使ってみる

今回は動画背景のうえにコピーテキストを重ねて、その文字にmix-blend-modeを適用させたいと考えました。
プロパティはdifference(差の絶対値)、この時フォントの色は白色にしておきます。

HTMLの構成はこのような形です。

<div class="mainImg">
	<div class="video">
	  <video src="sample.mp4" playsinline="" autoplay="" muted="" loop=""></video>
	</div>
	<div class="inner">
	  <div class="copyBox">
	    <p>なんか<span>いい感じの</span>コピー</p>
	  </div>
	</div>
</div>

スタイルシートは以下としました。

.mainImg{
	position: relative;
	width: 100%;
	height: calc(100vh - 100px);
}
.mainImg .video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.mainImg .video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}
.mainImg .inner{	
	display: flex;
	position: relative;
	height: 100%;
	justify-content: center;
	align-items: center;
}
.mainImg .inner .copyBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10%;
}
.mainImg .inner .copyBox p{
	font-size: 80px;
	font-weight: bold;
	color: #fff;
	mix-blend-mode: difference;
}
.mainImg .inner .copyBox p span{
	font-size:0.6em;
	display: block;
}

実装のサンプルページはこちら

mix-blend-modeが効かないことがある...なぜ？

実際の案件でmix-blend-modeを使用した際にハマった注意点があります。

作成時、パララックスの処理も同時に利用していたため、今回の例でいうと、以下の要素にz-indexやposition: fixed;の指定が必要になっていました。

.mainImg .inner{	
	display: flex;
	position: relative;
	z-index: 5; /* ←z-indexの指定 */
	height: 100%;
	justify-content: center;
	align-items: center;
}
.mainImg .inner .copyBox{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10%;
	position: fixed; /* ←position: fixed;の指定 */
}

重なり合う要素のはずなのに、まったく反応なし。
調べてみたところ、mix-blend-modeの効果は、同じスタックコンテキストの要素に対して適用されるとのこと。

スタックコンテキストとは？
HTML上の仮想的な奥・手前方向の概念です。
CSSでpositionやz-indexを指定したHTMLの要素にスタックコンテキストが生成され、要素の重なり方が決まります。
同じスタックコンテキストに所属していないもの同士は、重なり順を調整することができません。
※参考：重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN

親子・兄弟関係の中に、スタックコンテキストを形成するCSSプロパティ が含まれると、別グループの扱いになってしまうため、同じスタックコンテキストに属していないことになるのだそうです。

...なるほどわからん。

言葉ではわかりづらいため、図にするとこのような感じ。

最初、孫要素のpに対してmix-blend-modeを適用しましたが、上手くいかなかったのは、子要素の.copyBoxにposition: fixed;を指定していたため、.videoとは別のスタックコンテキストとなってしまいました。
次に.copyBoxに対してmix-blend-modeを適用しましたが、ここも上手くいかなかったのは、親要素の.innerにz-index:5が指定されているからでした。
今回の構成の場合、背景の.videoと重ねるためには、.innerに対してmix-blend-modeを適用するのが正解だったということです。

さいごに

画像編集の機能が、CSSで表現できるようになるなんて驚きです。スタイルを変更するだけで良いので、画像加工の手間も必要ありません。スタックコンテキストの概念を理解すれば、そこまで難しいものでもないので取り入れやすいですね。
今後も新しい技術や表現にトライしていきたいと思います。