CSS基础知识介绍——css3新增的背景属性

1. background-size属性：控制背景图像的大小

语法如下：
background-size：auto | length | percentage | cover | contain

PS：如果用户使用的是Firefox浏览器，需使用“moz-background-suze”或“background-size”的形式。如果用户使用的是Webkit引擎支持的浏览器，需使用“webkit-background-size”的形式，如果使用的是Opera浏览器，可直接使用“background-size”

2. background-clip属性：用来指定背景的显示区域或背景的裁剪区域

语法如下：
background-clip： border-box | padding-box | content-box
border-box：默认值，表示背景从border(边框)区域向外裁剪，也就是超出部分将被裁剪掉
padding-box：表示背景从padding（补白）区域向外裁剪，超过padding区域的背景将被裁剪掉
content-box：表示背景从content(内容)区域向外裁剪，超出content区域的背景将被裁剪掉

3. background-origin属性：用来指定绘制背景图像开始时的位置

语法如下：
background-origin：border | padding | content
border:默认值，表示从border(边框边缘)区域开始显示背景
padding：表示从padding（补白边缘）区域开始显示背景
content：表示从content(内容边缘)区域开始显示背景

PS：1）如果背景的background-repeat属性的值不是no-repeat，这个属性是无效的，它会使用默认值从border区域开始显示

         2）和background-size属性一样，使用background-origin属性需要考虑浏览器的兼容性，前缀名可参考background-size

        3）通常情况下，它与background-clip属性一起使用