background-image

<style>

#example1 {

    background-image: url(img_flwr.gif), url(paper.gif);

    background-position: right bottom, left top;

    background-repeat: no-repeat, repeat;

    padding: 15px;

}

</style>

等价于：

<style>

#example1 {

    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

    padding: 15px;

}

</style>

background-size

background-size：水平px/%  垂直px/%

background-position

background-Origin（定位区域）

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box, border-box区域内可以放置背景图像。

background-clip（绘制区域）

background-clip背景剪裁属性是从指定位置开始绘制。

取值有content-box, padding-box, border-box

background-repeat

background-attachment（页面滚动）

多重背景

语法缩写如下：

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

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;

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 的缩写值；

 *如果有 size 值，需要紧跟 position 并且用 "/" 隔开；

 *如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。

 *background-color 只能设置一个。