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" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
屬性 | |||||
---|---|---|---|---|---|
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背景