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

background-blend-modeプロパティ

 background-blend-modeプロパティは、複数の背景画像や配色を混ぜ合わせる(ブレンドする)方法を指定するプロパティです。

 画像どうしやエレメントどうしのブレンドにはmix-blend-modeプロパティを使用します。

2色のグラデーションと背景画像をブレンドする
background-image: linear-gradient(to right,yellow 0%,orange 100%),url('img/23370_3.png');
background-blend-mode: multiply;

構文(Syntax)

CSS

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

DOM(JavaScript)

値の取得
?String=object.style.backgroundBlendMode?

*間違いがないかを調べ中

値の設定
object.style.backgroundBlendMode="normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity"

Values

Value摘要
normal初期値(default value)。ブレンドはなし。
multiplyブレンドする。
screenスクリーンを覆ったような。
overlay薄くおおう。
darken暗め。
lighten明るめ。
color-dodge覆い焼き表示。
saturation最も彩度が高い色による印象表示。
color色による印象表示。
luminosity白黒表示。

備考(Remarks)

初期値(Default value)normal
継承(Inherited)No
変化(Animatable)No

Example