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