浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】背景色と要素のブレンド方法を指定する「mix-blend-mode」プロパティ

こんなのあるんだ!というプロパティを見つけたので、簡単にまとめ。
もしかしたら今後使う機会があるかもしれませんしね。

それがこちらの「mix-blend-mode」プロパティです。

mix-blend-mode – CSSリファレンス
http://www.htmq.com/css/mix-blend-mode.shtml

 

このプロパティは、背景色とその要素の色の重なり方を指定できるものです。
初期値は normal で、要素に背景色ををブレンドしない状態です。

使いそうなのは、乗算の multiply と、光を重ね合わせたようになる screen、下レイヤー色に応じて、multiply か screen になる overlay くらいでしょうか。
他にもたくさん種類がありますが、使いこなせそうにないので、とりあえずこのあたりだけでも覚えておけばいいのではと思います。

なお、上記の記事に、ブラウザ上での表示例が載っているので、参考にしてください。
もしくは、こちらの記事に載っているサンプルも分かりやすくておすすめです。

mix-blend-mode – CSS:カスケーディングスタイルシート|MDN
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

 

以上、背景色と要素の色の重なり方を指定できるプロパティ「mix-blend-mode」のご紹介でした。
是非、ご活用ください。

  • この記事いいね! (0)