CSS3 background 背景

设置元素的背景。background 是 background-color、background-position、background-size、background-repeat、background-clip、background-origin、background-attachment、background-image 的简写形式。背景可以是多层，分别以逗号隔开。

语法：

默认值：

参见各个属性的默认值。

继承性：

否

DOM 语法：

object.style.background = sbackground

适用于：

所有元素

浏览器支持：

可能的值：

值

描述

说明：

背景是分层的，按照逗号顺序，前面的在最上层，层的数目由 background-image 中逗号数目来决定。注意，background-image 中设置 none 仍然会单独占据一层。每一层的图片可以根据背景中的其它属性进行大小、位置、平铺的设定。匹配方法是从第一个值进行重复匹配。如果一个属性值没有足够的逗号分隔的值进行匹配，浏览器则采用重复列表中的重复值的方法进行计算。
比如下面的例子：

background-image: url(img1.png), url(img1.png), url(img1.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat;

background-image: url(img1.png), url(img1.png), url(img1.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat;

例子 1：

<style>
#cavas1
{
 width:600px;
 border:10px orange; 
 border-style:solid double;
 padding:20px;line-height:1.3em;
 
 background:url("http://dotnet.aspx.cc/Images/logoSite.gif") no-repeat 0 0,
            url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") repeat-x 201px 70px,
            url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg") repeat-y 100% 100%;
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

CSS3 中文参考手册

background 背景

语法：

可能的值：

说明：

例子 1：