cssbackground属性简书 CSS background-blend-mode 属性

cssbackground属性简书

CSS background 属性是用来设置元素的背景，它可以用来设置背景颜色、图片、渐变、图案或者其他背景效果。它是一个复合属性，可以使用多个属性来定义不同的背景效果。

background-color 属性用于设置元素的背景颜色，它可以使用十六进制颜色值、RGB 颜色值或者预定义的颜色名称。例如：

background-color: #FF0000;  
background-color: rgb(255, 0, 0);  
background-color: red;

background-image 属性用于在元素中显示图片，该属性必须使用 URL 来引用图片文件。例如：

background-image: url(/images/bg.jpg);

background-repeat 属性用于决定背景图片是否重复显示，该属性有三个取值：no-repeat、repeat 和 repeat-x/y。no-repeat 表示不重复显示；repeat 表示水平和垂直方向都重复显示；repeat-x 表示水平方向重复显示；repeat-y 表示垂直方向重复显示。例如：

background-repeat: no-repeat;  
background-repeat: repeat;  
background-repeat: repeat-x;  
background-repeat: repeat-y;

background - position 属性用于决定背景图片在元素中的位置。该属性有两个取值 left top （左上角位置）或者 center center （中心位置）。例如：

< pre > background - position : left top ; background - position : center center ; /* 中心位

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;
}

定义和用法

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 背景

阅读全文

文章详情

cssbackground属性简书 CSS background-blend-mode 属性