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

background-blend-modeプロパティ

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

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

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

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size画像のサイズ
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(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

 background-blend-modeの表示例です。線形グラデーションと画像をmultiply値によってブレンドします。