備忘録的プログラミングリファレンス

mix-blend-modeプロパティ

 mix-blend-modeプロパティは、複数の背景画像や配色を混ぜ合わせる(ブレンドする)方法を指定するプロパティです。mix-blend-modeプロパティはエレメントどうしや画像どうしをブレンドする場合に使います。

 ブレンドするプロパティにはbackground-blend-modeがあります。背景画像である場合はbackground-blend-modeプロパティを使います。

ブレンドする
mix-blend-mode: multiply;

構文(Syntax)

CSS

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

DOM(JavaScript)

値の取得
String = object.style.mixBlendMode;
値の設定
object.style.mixBlendMode=" normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity";

Values

Value摘要
normal初期値(default値)
multiplyブレンドする
screenスクリーンを覆ったような
overlay薄くおおう
darken暗め
lighten明るめ
color-dodge覆い焼き表示
color-burn焼き込み
difference差の絶対値
exclusiondifferenceよりコントラストが弱い
hue上の色調と下の色の彩度および明度
saturation最も彩度が高い色による印象表示
color色による印象表示
luminosity白黒表示
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)normal
継承(Inherited)No
CSS AnimationNo