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

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()円形グラデーション

ページ内 Index

構文(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値によってブレンドします。

関連（Related）