CSS background-blend-mode 属性

定義と使用法

background-blend-mode 属性は各背景レイヤー（色および/または画像）の混在モードを定義します。

参照してください：

CSS 教程：CSS 背景

例

背景画像の混在モードを "lighten"（明るくする）に指定します：

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

自分で試してみてください

ページの最後に TIY 実例の多くを見ることができます。

CSS 文法

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

属性値

値 説明
normal デフォルト。混在モードを通常に設定します。
multiply 混在モードを multiply（乗算）に設定します。
screen 混在モードを screen（スクリーン）に設定します。
overlay 混在モードを overlay（オーバーレイ）に設定します。
darken 混在モードを overlay（オーバーレイ）に設定します。
lighten 混在モードを lighten（明るくする）に設定します。
color-dodge ミックスモードを color-dodge（色減光）に設定します。
saturation ミックスモードを saturation（鮮度）に設定します。
color ミックスモードを color（色）に設定します。
luminosity ミックスモードを luminosity（明るさ）に設定します。

技術的詳細

デフォルト値： normal
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 言語： object.style.backgroundBlendMode="screen"

さらに例

例

ミックスモードを「multiply」に指定します：

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

自分で試してみてください

例

ミックスモードを「screen」に指定します：

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

自分で試してみてください

例

ミックスモードを「overlay」に指定します：

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

自分で試してみてください

例

ミックスモードを「darken」に指定します：

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;
}

自分で試してみてください

例

ミックスモードを「saturation」に指定します：

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

自分で試してみてください

例

ミックスモードを「color」に指定します：

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

自分で試してみてください

例

ミックスモードを「luminosity」に指定します：

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

自分で試してみてください

例

ミックスモードを「normal」に指定します：

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

自分で試してみてください

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
35.0 79.0 30.0 7.1 22.0