CSS3关于背景图片应用的总结
背景的 基本属性
background-color(背景颜色)
background-image(背景图片)
background-repeat(背景图片展示的方式)
background-attachment(背景图片滚动还是固定)
background-position(背景图片定位)
简写为：
background: background-color background-image background-repeat background-attachment background-position
1、background-color属性
语法：
background-color:transparent || color
默认是transparent，不设置颜色情况下是透明无色。color可以取颜色名、rgb颜色、hls值、十六进制颜色值、rgba颜色、hsla颜色值。
2、background-image属性
语法：
background-image:none || <url>
默认是none，<url>是图片路径
3、background-repeat属性
语法：
background-repeat:repeat || repeat-x || repeat-y || no-repeat
4、background-attachment属性
语法：
background-attachment：scroll || fixed
该属性取值为“fixed”时，一般运用在HTML或body标签上，其他标签达不到固定的效果
5、background-position属性，用来设置背景图片的位置，默认值为(0,0)||(0%,0%)||(left,top)
CSS3中新增的属性：
background-origin：绘制背景图片的起点。用来决定background-position属性的参考原点，决定背景图片的定位起点，默认情况下background-position以元素的左上角为起点。
语法：
background-origin:padding-box || border-box || content-box
padding-box（padding）:默认值，决定background-position起始位置的padding的外边缘（border的内边缘）开始显示背景图片。
border-box（border）：决定了background-position起始位置从border的外边缘开始显示背景图片。
content-box（content）：决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片。
background-clip：指定背景图片的显示范围，就是背景裁切属性，
语法：
background-clip:border-box || padding-box || content-box
border-box：默认值，元素背景图像从元素的border区域向外裁剪，元素边框之外的背景图片被裁剪掉。
padding-box：元素背景图像从padding区域向外裁剪，元素padding区域之外的背景图片都被裁剪掉。
content-box：元素背景图像从content区域向外裁剪，元素内容区域之外的背景图片被裁剪掉。
background-break：指定内联元素的背景图片进行平铺的循环方式。有三个属性值：
bounding-box:背景图像在整个内联元素中进行平铺
each-box: 背景图像在行内进行平铺
continuous:下一行背景图像紧接着上一行背景图像进行平铺。
background-size：指定背景图片的尺寸大小。
语法：
background-size：auto || <length> || <perentage> || cover || contain
auto ：默认值，保持背景图片的原始高度和宽度。
< length >：取具体的整数（px），改变图片的大小。
< perentage >:取百分值，百分值是相对于元素的宽度来进行计算。
cover：把图片放大，铺满整个容器。（可能导致图片失真）
contain：保持图片的本身宽高比例，把背景图片缩放到宽度或者高度正好的背景容器里面。
在CSS3中可以设置多背景图像,语法：
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
background-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;
