例
指定混合模式：
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
背景共混模式屬性定義了每個背景層的混合模式(color and/or image) 。
| 默認值： | normal |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.backgroundBlendMode="screen" |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 不支持 | 30.0 | 7.1 | 22.0 |
CSS語法
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值
| 值 | 描述 | 播放 |
|---|---|---|
| normal | 這是默認的。 設置混合模式為正常 | 播放 ” |
| multiply | 設置混合模式繁殖 | 播放 ” |
| screen | 設置混合模式為濾色 | 播放 ” |
| overlay | 設置混合模式為疊加 | 播放 ” |
| darken | 設置混合模式為變暗 | 播放 ” |
| lighten | 設置混合模式為減輕 | 播放 ” |
| color-dodge | 設置混合模式為顏色減淡 | 播放 ” |
| saturation | 設置混合模式為飽和 | 播放 ” |
| color | 設置混合模式為顏色 | 播放 ” |
| luminosity | 設置混合模式為光度 | 播放 ” |
相關頁面
CSS教程： CSS背景