免費AI編程助手
CSS background-blend-mode 屬性
實例
混合模式:
div {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%, white 100%), url('logo.png');
background-blend-mode: color-dodge;
}
嘗試一下 ?
定義和用法
background-blend-mode 屬性定義了背景層的混合模式（圖片與顏色）。
| 默認值: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. 查看 animatable |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.backgroundBlendMode="screen" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| 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 背景
更多建議：