CSS实现背景图片详解&&全屏铺满自适应的方式

问题: CSS实现背景图片全屏铺满自适应的方式

解决：

（1）background-image:可添加多张背景图片。
			参数：url()  ||    none(默认)
      		background-image: url(images/scroll_top.jpg),
                			  url(images/scroll_bottom.jpg),
                			  url(images/scroll_middle.jpg);
            注意：背景图不占位置（不受padding的影响），
                 img插入图片才占位且有4像素的距离，即背景图不能撑出高度。4像素的距离用 vertical-align清除	  
                 
（2）background-size:背景图片的大小
			参数：百分比 ||  精确值 ||  auto(默认) ||  cover || contain
				auto:背景图像的真实大小。
                cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
                      图片边缘距父元素边框中最远边等比例放大
                contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等。
                        背景图像始终被包含在容器内。
                        图片边缘距父元素边框中最近边等比例放大
			注意：
			    1、一般只设置一个值（宽度），高度就等比例缩放，这样不变形
			        background-size:100%    （宽度100% 高度自适应）
			     2、用于调整背景图像是否完整显示
			     
（3）background-position复合属性：背景图像位置
             （ background-position-x  ， background-position-y）
			 参数：x坐标和y坐标，可以使用**方位名词**和**精确单位**
		   【1】方位：top,center,bottom,left,center,right
					1、两个值都是方位名词，两个值前后顺序无关。
  						 background-position:left center
  						 background-position:center
		   【2】精确单位：百分数或由浮点数字和单位标识符组成的长度值（表示与容器边缘的偏移量）
		   				1、超出父级盒子部分隐藏
		   			    2、如：20px 50px表示：以图片左上角为基准，向右偏移20px,向下偏移50px
		   【3】注意：                       
		             1、如果只指定一个值，则表示横坐标，纵坐标将默认为50%（居中对齐）
		             2、如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
		             3、该属性定位不受对象的补丁属性（padding）设置影响
		             4、默认值为：(0% 0%)，即图片定位于对象不包括补丁（padding）的内容区域左上角

			【4】例如：backgroun-position:50% 50%   水平和垂直居中
			     backgroun-position:center center
			     backgroun-position-x:left 30px    (向右便宜30px)
			     center:50%   left top =0%   right bottom=100%
			     
（4）background-repeat: 背景图像的平铺
           参数：repeat（默认）  ||  no-repeat || repeat-x || repeat-y
           
（5）background-attachment：背景图像是否固定或者随着页面的其余部分滚动
          参数：scroll || fixed
          	   scroll ：背景图像是随着对象内容滚动
          	   fixed：背景图像固定
          	  
（6）background-color： 背景颜色
		  参数：transparent（默认） || color
		           背景半透明是指盒子背景半透明，盒子里面的内容不受影响
		  
（7）background-origin:背景图像的位置
		  border-box ：背景图片从边框的左上角开始
		  padding-box (默认)：背景图像从填充边缘的左上角开始
		  content-box -：背景图片从内容的左上角开始
		  
（8）**background:背景复合写法**
		  background: 背景颜色 背景图像地址 背景平铺 背景图像滚动 背景图片位置;

1. 方法一：

	margin:0px;
	background: url(images/bg.png) no-repeat;
	background-size:100% 100%;
	background-attachment:fixed;

2. 方法二

	background: url("bg.png") no-repeat;
	height:100%;
	width:100%;
	overflow: hidden;
	background-size:cover;//或者background-size:100%;

1. 方法三

	body {
		background-image: url(images/bg.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-attachment: fixed;
		background-size: cover;
		background-color: #464646;
	}