css3新增的background属性

1、background-size

可取值：auto（背景图片正常显示）

　　　　size size （150px 40%）

　　　　cover （背景图片覆盖整个背景）

　　　　contain（背景图片缩小填满整个背景）

实例：

　　

 /*这段代码是当不支持CSS3 Media Queries浏览器按background-size:cover模式显示背景图片*/
   body {
     background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }
   /*1024px X 768px */
   @media only all and (max-width: 1024px) and (max-height: 768px) {
       body {	
	  -moz-background-size: 1024px 768px;
	  -webkit-background-size: 1024px 768px;
	  -o-background-size: 1024px 768px;
	  background-size: 1024px 768px;
       }
    }
   /*640px X 480px*/
   @media only all and (max-width: 640px) and (max-height: 480px) {
       body {	
	   -moz-background-size: 640px 480px;
	   -webkit-background-size: 640px 480px;
	   -o-background-size: 640px 480px;
	   background-size: 640px 480px;
       }
   }

　　2、background-clip

可取值：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

　　3.background-origin

取值说明：

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

 

转载于:https://www.cnblogs.com/dunken/p/4380170.html