CSSのmix-blend-modeは背景との合成範囲を決めてから使う
公開日： 執筆：佐藤
CSSのmix-blend-modeを使うときは、何と色を混ぜるのかを先に確認してください。mix-blend-modeは要素の色を背後の内容と混ぜます。文字へ指定すると、背景写真や親要素の色によって見え方が変わります。
背景画像と背景色だけを混ぜたいなら、background-blend-modeを使います。見出し、本文、buttonまで背景と混ぜたいのか、背景レイヤーだけを変えたいのかで、指定するpropertyを分けます。
要素と背景レイヤーは混ざる相手が違う
Compositing and Blending Level 1では、mix-blend-modeを、要素の色とbackdropを混ぜるpropertyとして定義しています。mix-blend-modeを指定した要素は、属するstacking contextの背後にある内容と合成されます。
一方、background-blend-modeは、その要素のbackground imageとbackground colorを混ぜます。要素の後ろにある別の内容とは混ざりません。
| 目的 | 使うproperty | 影響する範囲 |
|---|---|---|
| 見出し文字を背後の写真と混ぜる | mix-blend-mode |
文字とその背後の内容 |
| 背景写真と重ねた色を混ぜる | background-blend-mode |
同じ要素の背景レイヤー |
写真の上に文字を置く見出しでは、文字へmix-blend-modeを使うと、写真の明暗に応じて文字色が変わります。背景を変えたとき、文字が読めるかも変わります。色の演出を優先して、問い合わせbuttonや価格を読みにくくしてはいけません。
背景を加工したいだけなら背景レイヤーへ限定する
背景写真へ色を重ねたいだけなら、文字とbuttonを入れた要素へmix-blend-modeを指定しません。背景レイヤーだけを混ぜる例は次のとおりです。
.hero {
background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url("hero.jpg");
background-blend-mode: multiply;
}
これは背景のgradientと画像を混ぜます。見出しやlinkはbackground layerではないため、この指定だけで文字色が混ざることはありません。文字を白くするなら、文字色は別に指定し、写真が変わっても読めるかを確認します。
mix-blend-modeを使う場合は、親要素が作るstacking contextにも注意します。opacity、filter、transformなどの指定によって、要素が混ざる範囲が変わることがあります。見た目が意図と違うときは、blend modeの名前を変える前に、どの要素が背後にあるか、親要素に重なり順を変える指定がないかを調べます。
合成を見出しの中だけへ閉じる場合
写真をまたぐ大きな見出しの一部だけを背景と合成したい場合、周囲の要素まで影響するなら、合成をどの範囲で行うかを決めます。isolation: isolateを指定した要素は、新しいstacking contextを作ります。子要素のmix-blend-modeを、その要素の中の背景とだけ組み合わせたいときの境界に使えます。
.hero {
position: relative;
isolation: isolate;
}
.hero-title {
mix-blend-mode: screen;
}
この指定を足す前に、見出しがどの背景と混ざるべきかを決める。ページ全体の背景と混ぜたいのか、見出し部分の写真とだけ混ぜたいのかで、置く要素は変わる。isolationは色を読みやすくする指定ではない。合成の境界を作る指定であるため、文字色、背景写真、linkの色を別に確認する。
また、親要素へopacityやfilterを入れたあとでblend modeの見え方が変わる場合がある。表示を直すために指定を重ねるほど、どの処理が色を変えたのか追えなくなる。背景を加工する指定、文字に掛ける指定、合成の境界を作る指定を一つずつ確かめる。
表示の演出と読めることを分ける
blend modeは色を作る機能であり、読みやすさを保証する機能ではありません。確認する順序は、次のようにします。
- 背景を変えても読める文字色とbuttonの色を決める。
- 背景だけを加工したいなら
background-blend-modeを試す。 - 要素と背後を混ぜる必要がある場合だけ
mix-blend-modeを使う。 - 明暗が異なる複数の背景で、文字、link、buttonを確認する。
写真を差し替えるページでは、明るい空、暗い室内、細かな模様の三種類で見る。元の写真で読めても、別の写真の明るい部分へ文字が重なると、blend modeによって輪郭が消えることがある。背景を更新する担当とCSSを直す担当が別なら、写真を差し替えるときに確認する画面と文字を決めておく。
制作を任せる場合は、blend modeの値だけで受け取らず、対象要素、背景画像、親要素の重なり順を受け取ります。画像を差し替えた後に読めなくなったとき、誰がどのCSSを見直すかを決めておきます。
最初の一手は、mix-blend-modeを指定した要素を一つ選び、その背後にどの画像、色、要素があるかを書き出すことです。背景だけを変えたいなら、background-blend-modeへ置き換えられるかを確認します。
関連記事
