最近、CSSのmix-blend-modeを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる値を確認しました。
基本的な使い方
mix-blend-modeを指定すると、重なっていている要素の色を合成します。
画面上で重なっていれば、親要素と子要素である必要はなく、兄弟要素でもOKです。
DEMO
セレクトボックスの値でブレンドモードが切り替わります。
トランジションの検証
👆 マウスを乗せると、ブレンドモードが解除されたように見えます。
