background-origin
设置元素背景图片的
原始起始位置
。
语法：
参数分别表示背景图片是从
边框
，还是
内边距（默认值）
，或者是
内容区域
开始显示。
效果如下：
立即学习
“
前端免费学习笔记（深入）
”；
需要注意的是
，如果背景不是
no-repeat
，这个属性无效，它会从边框开始显示。
例子：
效果：
background-clip
用来将背景图片做适当的
裁剪
以适应实际需要。
语法：
参数分别表示从
边框、
或
内填充
，或者
内容区域
向外裁剪背景。
no-clip
表示不裁切，和
参数border-box
显示同样的效果。backgroud-clip默认值为
border-box
。
效果如下图所示：
立即学习
“
前端免费学习笔记（深入）
”；
例子：
效果： padding-box效果：
background-size
设置背景图片的大小，以
长度值
或
百分比
显示，还可以通过
cover
和
contain
来对图片进行伸缩。
语法：
取值说明：
1、auto
：默认值，不改变背景图片的原始高度和宽度；
2、
：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来
等比缩放
；
3、
：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover
：顾名思义为
覆盖
，即将背景图片等比缩放以
填满整个容器
；
5、contain
：容纳，即将背景图片等比缩放至
某一边紧贴容器边缘为止
。
提示：
大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
multiple backgrounds
多重背景，也就是CSS2里
background
的属性外加
origin
、
clip
和
size
组成的新background的多次叠加，缩写时为用
逗号
隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
举例：
有三张单独的图片：
立即学习
“
前端免费学习笔记（深入）
”；
立即学习
“
前端免费学习笔记（深入）
”；
立即学习
“
前端免费学习笔记（深入）
”；
使用多背景技术实现：
立即学习
“
前端免费学习笔记（深入）
”；
例子：
效果：
background-origin ： border-box | padding-box | content-box; 背景原点 padding contentbackground-clip ： border-box | padding-box | content-box | no-clip 背景裁切 padding contentbackground-size: auto | <长度值> | <百分比> | cover | containbackground ： [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; 多重背景