CSS background-blend-mode 屬性
示例
指定背景影像的混合模式為“lighten”
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
background-blend-mode 屬性定義了每個背景圖層（顏色和/或影像）的混合模式。
| 預設值 | normal |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.backgroundBlendMode="screen" |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS 語法
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| normal | 這是預設值。將混合模式設定為 normal | 演示 ❯ |
| multiply | 將混合模式設定為 multiply | 演示 ❯ |
| screen | 將混合模式設定為 screen | 演示 ❯ |
| overlay | 將混合模式設定為 overlay | 演示 ❯ |
| darken | 將混合模式設定為 darken | 演示 ❯ |
| lighten | 將混合模式設定為 lighten | 演示 ❯ |
| color-dodge | 將混合模式設定為 color-dodge | 演示 ❯ |
| saturation | 將混合模式設定為 saturation | 演示 ❯ |
| color | 將混合模式設定為 color | 演示 ❯ |
| luminosity | 將混合模式設定為 luminosity | 演示 ❯ |
更多示例
示例
指定混合模式為“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;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 背景
