CSS3背景相关

适当的裁剪背景图片

语法:

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

效果展示：

border-box：从边框向外裁剪背景（默认值）
padding-box：从内填充向外裁剪背景
content-box：从内容区域向外裁剪背景
no-clip：不裁剪

CSS3背景background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对比图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

 

 取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

 多重背景multiple backgrounds

http://www.w3cplus.com/content/css3-multiple-backgrounds

 语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

 

 缩写拆解：

background-repeat : repeat1,repeat2,...,repeatN;
backround-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;
background-image:url1,url2,...,urlN;

注意：

1. 用逗号隔开每组 background 的缩写值；
2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4. background-color 只能设置一个。

设置元素背景图片background-origin

语法：

background-origin ： border-box | padding-box | content-box;

效果展示：

border-box ：表示背景图片从边框开始显示

padding-box：背景图片从内边距(默认值)开始显示

content-box：背景图片从内容区域开始显示

注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。