第六章 背景

第六章 背景

背景图片开始位置 background-orgin
值：border-box padding-box content-box
默认为padding-box，即从元素内边距开始平铺
border-box：从边框
padding-box：从内边距
content-box：从内容
注意：只有背景图片设置为no-repeat时，此属性才有效

适当裁剪背景图片，以适应需要 background-clip
值：border-box padding-box content-box no-clip
从边框 内边距 或内容向外裁剪背景图片
border-box：默认值
no-clip：表示不裁剪，与border-box效果相同。
背景图片重复也有效果
当元素尺寸小于背景图片时，效果才明显。
p{background-clip: content-box;}


设置背景图片大小 background-size
值：auto <length> <percentage> cover contain
auto：默认值
长度：成对出现，如200px 50px，将图片宽高依次设置为前面两个值，当设置一个值时，将其作为宽度对图片成比例缩放。
百分数：0%-100%之间的任意值，将元素宽高分别乘以两个百分数得到图片宽高。如果只有一个值，同上。
cover：覆盖，将图片等比例缩放，填满整个容器。
contain：容器，将背景图片等比例缩放至一边紧贴在容器边缘上。

多背景
在CSS2基础上加上origin clip 和 size，使用多背景时，每组属性值之间用逗号隔开。
background: [background-color] [background-image] [background-position]
[ / background-size] [background-repeat] [background-attachment] [background-clip]
[background-origin],...
说明：
1.无论怎样，background-color只能有一个
2.用逗号隔开每组background的缩写
3.如果有size值，需要紧跟position，并用" / "隔开
4.如果有多个背景图片，但属性只是设置一个，如background-repeat，表示其他背景图片也使用相同的属性值。
5.分解写法时，如果使用多个背景，要设置多个值，每组值间用逗号隔开。