css3背景
新增的属性：
- background-origin（指定背景图像的位置区域）padding-box border-box content-box
- background-clip（规定背景的绘制区域）border-box padding-box content-box
- background-attachment（设置背景图像是否固定或者随着页面的其余部分滚动）scroll fixed inherit
- background-size: （属性定义了背景图的尺寸） length | percentage | cover | contain;
- background-blend-mode（属性定义了背景层的混合模式（图片与颜色）
.d1
{
/* 同时设置两张背景图 */
width:
200px
;
height:
200px
;
background:
linear-gradient(red
,
pink)
;
/* 渐变色*/
background-image:
url
(
'1.png'
),
url
(
'2.jpg'
);
/* 图片路径 */
background-position:
right
bottom
,
left
top
;
/* 图片位置 */
background-repeat:
no-repeat
,
no-repeat
;
/* 是否重复 */
background-size:
200px
100px
,
200px
100px
;
/* 图片尺寸 ength %比 cover contain */
background-origin:
content-box
,
content-box
;
/* 指定背景图像的位置区域 padding-box border-box content-box 新增属性*/
background-clip:
border-box
,
border-box
;
/* 规定背景的绘制区域 border-box|padding-box|content-box */
background-attachment:
fixed
,
fixed
;
/* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll fixed inherit */
background-blend-mode:
normal
;
/* background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。 */
}
综合写法：
.div2
{
width:
200px
;
height:
200px
;
background:
url
(
1.png
)
right
bottom
no-repeat
,
url
(
2.jpg
)
left
top
no-repeat
;
}