『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。
大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。
上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。
See the Pen
ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk)
on CodePen.
要はテキストも一緒に乗算になっているので想定したデザインのようになりません。
ということでひと工夫が必要です。
例えばabsoluteを使って固定の幅・高さで設定したらあっという間にできます。
が、可変に対応できずいまいち汎用性がありません。
ということで今回は『::after』要素をうまく使って、可変対応をした中のテキストをはっきり表示させつつ背景色にブレンドモードを使ったボックスの作り方をご紹介します。
目次
中のテキストをはっきり表示させたまま、ブレンドモードを使ったボックス内で表示（可変対応）
というわけでとりあえずの結果はこんな感じです。きれいにできました。
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
コードの方を説明しましょう。
HTML
|
1 2 3 4 5 6 7 |
<div class="photoBox"> <div class="bgWrap"> <div class="textBox"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </div> |
HTMLの方は写真を表示するボックス、背景色を表示するボックス、テキストを表示するボックス、という感じの構成です。
一番最初のテキストも一緒にブレンドモードになってしまっていた状態と全く同じです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.photoBox { background: url(写真のURL) center center / cover; width: 100%; height: 100vh; padding: 20px; } .bgWrap{ position: relative; width: 100%; } .bgWrap::after { content: ''; background: linear-gradient(90deg, rgba(51,153,162,1) 0%, rgba(2,33,70,1) 100%); mix-blend-mode: multiply; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .textBox{ position: relative; z-index: 2; color: #ffffff; padding: 20px; } |
photoBox
『photoBox（写真部分）』については普通に写真を背景指定する感じでOKです。bgWrap
重要なのがここからで、まず『bgWrap（背景色）』の部分についてはposition: relative;と、幅を設定しておいてください。
次に『bgWrap（背景色）』に対して『::after』を使って、背景色とブレンドモードの設定をします。
この時contentやabsoluteなど細かい設定も忘れずつけてください。
高さも100%を指定しておけば、absoluteなので親のボックスの高さに合わせて表示してくれます。
z-indexは1を指定しておきます。
textBox
次に『textBox（テキスト部分）』、こちらはposition: relative;を設定しておいて、z-indexは2を設定します。これで『背景色より上に表示する』という指定になりました。
これで最初の状態から無事背景のみにブレンドモードが適用され、かつ可変にも対応することができました！
理屈さえわかってしまえば案外簡単に対応できます。
ぜひ困ったら使ってみてください。
