例
指定混合模式:
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背景