CSSbackground -blend-modeプロパティ

例

背景画像のブレンドモードを「明るく」するように指定します。

div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このbackground-blend-modeプロパティは、各背景レイヤー（色や画像）のブレンドモードを定義します。

デフォルト値：	正常
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.backgroundBlendMode = "screen"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
background-blend-mode	35.0	79.0	30.0	7.1	22.0

CSS構文

プロパティ値

Value	Description	Play it
normal	This is default. Sets the blending mode to normal
multiply	Sets the blending mode to multiply
screen	Sets the blending mode to screen
overlay	Sets the blending mode to overlay
darken	Sets the blending mode to darken
lighten	Sets the blending mode to lighten
color-dodge	Sets the blending mode to color-dodge
saturation	Sets the blending mode to saturation
color	Sets the blending mode to color
luminosity	Sets the blending mode to luminosity

その他の例

例

ブレンドモードを「乗算」するように指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}

例

ブレンディングモードを「画面」に指定します。

div {
width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}

例

ブレンドモードを「オーバーレイ」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}

例

ブレンディングモードを「暗く」するように指定します。

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

例

ブレンドモードを「color-dodge」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}

例

ブレンディングモードを「飽和」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}

例

ブレンドモードを「カラー」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}

例

ブレンディングモードを「明度」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}

例

ブレンディングモードを「通常」に指定します。

div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}

CSSリファレンス

CSS Properties