CSS mix-blend-mode
個人的にはあまり使うことのないプロパティですが、知っていて損はないmix-blend-modeプロパティについてまとめておきます。
mix-blend-modeは、２つの要素が重なり合ったとき色をどのように表示するかを指定します。ちなみにIE非対応です
2つの色の重ね方
要素の重なりという固い言い方をしましたが特別なものではなく、たとえば背景色(画像)をもつブロックの中にあるテキストや画像。positionを使って重ねた２つの要素など、よくあるものです。
通常であれば、後にある要素や子要素が上に重なり下の背景は見えなくなります。下の例のような感じです。
これを合成、乗算、減算など色々処理して表示方法を変えるのがmix-blend-modeの働きです。値の種類が多いので、テキストにそれぞれ指定したのが次のサンプルです。
「NORMAL」がmix-blend-modeを指定していない文字色です。真ん中のサンプルでnormalが見えない理由は不明です。コードは存在しているのになぜか表示されません。
See the Pen blend-mode by Takashi Abe (@TakeshiAbe) on CodePen.
以下、mozillaの説明を自己解釈したものです。
multiply
下の色と上の色の掛け合わせになる。白色は変化をもたらさない。表示される色は黒に近づく。
screen
上の色を反転して下の色と乗算し、さらに反転させた色になる。2つの色を重ねてスクリーン投影したものに似ている。表示される色は白に近づく。
overlay
「下の色が暗ければmultiply、明るければscreenになる」と説明があるものの、上のサンプル見るとそうでもない。とりあえず、下の色にあわせて変化する。
darken
色成分のうち「最も暗い色」になる。
lighten
色成分のうち「最も明るい色」になる。
color-dodge
上の色を反転し、下の色を除算した色になる。上の色が黒だと仕事しない。色は白に近づく。
color-burn
下の色を反転し、上の色で除算した色になる。下の色が白だと仕事しない。色は黒に近づく。
hard-light
後ろから強いスポットライトをあてたような色になる。
soft-light
後ろから弱めのスポットライトをあてた色になる。
difference
2つの色のうち、暗い方の色を取り除く。黒色レイヤーでは仕事しない。白色レイヤーのときは、もう片方のレイヤーの色を反転させる。
exclusion
differenceよりコントラスト弱め
hue
上の色の色調で、彩度と明度は下の色。
saturation
上の色の彩度で、色調と明度は下の色。
color
上の色の色調と彩度で、明度だけ下の色。
luminosity
下の色の色調と彩度で、明度だけ上の色。
mix-blend-modeとisolation
mix-blend-modeと対で覚えておくと良いのが「isolation」プロパティ。値には「auto」「isolate」のいずれかをとります。
名前の通りで、isolation: isolate; を指定した要素は、重ね合わせから孤立したコンテンツになるのでmix-blend-modeの影響を受けなくなります。
darkmode.js
ダークモードを実装できるスクリプトである「darkmode.js」にもmix-blend-modeが使われています。darkmode.jsにもいくつかエラー報告があるようですが、isolation: isolate を知っていれば自身で修正できることもあります。覚えておきましょう。
