🙌

CSSのmix-blend-mode: overlayで画像の上にテキストをオーバーレイする

2020/12/10に公開

CSS

tech

CSSのプロパティmix-blend-modeでは背景とその上に重なる要素のブレンドのされ方を指定することができます。

これを使うと画像の上に格好良く画像をのせることが可能です。mix-blend-modeはIEには対応していませんが、Chrome、Safari、FireFoxといったモダンブラウザでは対応済みです。

こんなHTMLを用意したとして…

HTML

<div class="container">
  <img src="画像のURL" alt="" class="image" />
  <h1 class="text">KYOTO</h1>
</div>

画像の中心にテキストを配置したうえでmix-blend-mode: overlayを指定します。

CSS

/* 一部省略しています。完成形のCSSはCodePenをチェックしてください */
.container {
  position: relative;
}
.text {
  margin: 0; /* 見出しのマージンを消しておく */
  position: absolute; /* 絶対配置で画像の中央に配置 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #FFF;
  font-weight: 800;
  font-size: 100px;
  mix-blend-mode: overlay; /* 👈 ポイント */
}

mix-blend-modeのオーバーレイ（overlay）とは

MDNにもあまり詳しい解説が載っていなかったので、仕様書を読んでみます。引用とざっくりとした意訳を載せておきます。

Multiplies or screens the colors, depending on the backdrop color value.
Source colors overlay the backdrop while preserving its highlights and shadows.

背景の色に応じて、乗算もしくはスクリーンをかける。（上に重なる要素の）ハイライトとシャドウは保ちつつ、色を背景に重ね合わせる。

The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.

背景色は置き換わらないものの、背景の明るさもしくは暗さが反映されるように、上に重なる要素の色とミックスされる。

Overlay is the inverse of the hard-light blend mode.

オーバーレイは「ハードライト」の反対の役割をする。

計算式も載っていました（B(Cb, Cs) = HardLight(Cs, Cb)）。ハードライトの反対ということなので、ハードライトの式をもとに作ると、以下のようになるかな？

if(Cb <= 0.5)
    B(Cb, Cs) = Multiply(Cs, 2 x Cb)
else
    B(Cb, Cs) = Screen(Cs, 2 x Cb -1)

Csが上に重なる方で（source）、Cbが背景の方（backdrop）ですね。

mix-blend-modeのオーバーレイ（overlay）とは

Discussion