CSS3背景

background相关属性汇总：

一、background-image：设置背景图片
=》多个背景图片的导入，中间使用逗号隔开即可。
=》花(flower.png)放在右下角，不重复出现。
=》纸(paper.png)放在左上角，重复出现。

#image{
	background-image:url(flower.png),url(paper.png);
	background-position:right bottom,left top;
	background-repeat:no-repeat,repeat;
}

二、background-size：设置背景图片大小

• background-size:100% 50%;
  =》 左右填充100%，上下填充50%。
• background-size:80px 60px;
  -=》左右拉伸宽度为80px，上下拉伸宽度为60px.

三、background-repeat：背景图片是否重复显示

• background-repeat：repeat;
• background-repeat：no-repeat;

四、background-clip：规定背景的绘制区域

• background-clip：padding-box;
• background-clip：content-box;

1、未添加background-clip的任何属性

<style>
#example{
	background-color:pink;
	border:10px dootted #FFFFCC;
	pading:25px;
}
</style>

效果图为：

2、添加background-clip:padding-box属性

<style>
#example{
	background-color:pink;
	border:10px dootted #FFFFCC;
	pading:25px;
	backgorund-clip:padding-box;
}
</style>

效果图为：

3、添加background-clip：content-box属性：

<style>
#example{
	background-color:pink;
	border:10px dootted #FFFFCC;
	pading:25px;
	backgorund-clip:content-box;
}
</style>

效果图为：

五、background-attachment：背景图片是否固定或者随着页面的其余部分滚动

• background-attachment：scroll
  =》默认值，背景图片会随着页面其他部分的滚动二滚动
• background-attachment：fixed
  =》页面的其他部分滚动时，背景图片固定不动
• background-attachment：inherit
  =》继承父元素的background-attachment属性的设置

六、background-position：背景图片位置

七、background-origin：规定background-position属性相对于什么位置来定位

• padding-box：背景图片相对于内边距框来定位。
• border-box：背景图片相对于边框盒子来定位。
• content-box：背景图片相对于内容框来定位。