background

background新增的属性background-size，background-clip,background-origin

background-size：基本语法

 background-size: auto || <length> || <percentage> || cover || contain

取值说明：

一、auto:此值为默认值，保持背景图片的原始高度和宽度；

二、<length>此值设置具体的值，能够改变背景图片的大小；

三、<percentage>此值为百分值，能够是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

四、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又没法使用background-repeat来实现时，咱们就能够采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；

五、contain:此值恰好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又须要将背景图片所有显示出来，此时咱们就能够使用contain将图片缩小到适合容器大小为止，这种方法一样会使用图片失真。

当background-size取值为<length>和<percentage>时能够设置两个值，也能够设置一个值，当只取一个值时，第二个值至关于auto，但这里的auto并不会使背景图片的高度保持本身原始高度，而会与第一个值相同。

 

background-clip：基本语法

 background-clip ： border-box || padding-box || content-box

取值说明：

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

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

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

 

background-origin的基本语法

 background-origin: padding-box || border-box || content-box

取值说明：

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

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

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