背景相关属性-学思创

背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。有如下儿个常用的背景相关属性。

background: 设置对象的背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等属性。
background-attachment: 设置背景图片是随对象内容滚动还是固定的。在指定该属性之前，必须先指定background-image 属性。该属性有如下两个值。 scroll ：指定背景图片会随组件里内容的滚动而滚动。这是默认值， fixed: 背景图片固定，不会随组件里内容的滚动而滚动。
background-color: 用于设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
background-image: 用于设置背景图片。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。该属性需要使用url(）函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
background-position: 用于设置对象的背景图片位置，该属性值应该是两个值，它们既可是实际的长度值，也可是百分比。如果只指定了一个值，该值将对应横坐标，纵坐标将默认为50% ；如果指定了两个值，那么第二个值将对应纵坐标。在指定该属性之前，必须先指定background-image 属性。
background-repeat: 适用于CSS1, 用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image 属性。该属性有repeat 、no-repeat 、repeat-x 、repeat-y 4 个值，分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。

CSS3 新增了如下儿个背景相关属性：

background-clip: 该属性用于设置背景覆盖的范围。
background-origin :该属性用于设置背景覆盖的起点。该属性与前面介绍的background-position 有些相似。
background-size: 该属性用于设置背景图片的大小。该属性由两个值组成，分别代表图片的宽度、高度。宽度、高度支持如下3 种写法。

长度值，例如20px, 指定背景图片的宽或高为20px 。
百分比，例如80% ，指定背景图片的宽或高为它所在组件的宽或高的80% 。
auto, 指定背景图片保持纵横比缩放。宽度、高度只能有一个被指定为auto,表明宽度、高度会以保持纵横比的方式自动计算出来。

对于一个HTML组件来说，它由元素内容区(content)、内补丁区(padding)、边框区(border)和外补丁区(margin)组成。

在CSS3中可以指定背景需要覆盖哪个范围。背景的覆盖范围由background-clip 属性指定，该属性支持如下几个属性值。

border-box ：指定背景覆盖边框区(border)内补丁区(padding) 、内容区(content) 。
no-clip: 指定背景覆盖边框区( border) 、内补丁区(padding) 、内容区(content) 。
padding-box: 指定背景覆盖内补丁区( padding) 、内容区( content) 。
content-box: 指定背景只覆盖内容区( content) 。

在CSS3以前，每个组件只能指定一种背景图片，如果同时指定了背景颜色和背景图片，那么背景图片会覆盖背景颜色。CSS3 的出现改变了这种局面，CSS3 允许同时指定多个背景图片，这些背景图片会依次覆盖。