©
本文档使用
php中文网手册 发布
background：[ <bg-layer>, ]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>
默认值：看每个独立属性
适用于：所有元素
继承性：无
动画性：看每个独立属性
计算值：看每个独立属性
<' background-image '>：
指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
<' background-position '>：
指定对象的背景图像位置。
<' background-size '>：
指定对象的背景图像的尺寸大小。
<' background-repeat '>：
指定对象的背景图像如何铺排填充。
<' background-attachment '>：
指定对象的背景图像是随对象内容滚动还是固定的。
<' background-origin '>：
指定对象的背景图像显示的原点。
<' background-clip '>：
指定对象的背景图像向外裁剪的区域。
<' background-color '>：
指定对象的背景颜色。
一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
示例：假设要在同一个元素上定义3个背景图像
缩写方式：
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box, url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box, url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
注意， <' background-color '> 只能设置一次，且由于写在前面的背景会叠在之后的背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。
拆分方式：
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg); background-repeat:no-repeat,no-repeat,no-repeat; background-attachment:scroll,scroll,scroll; background-position:10px 20px,10px 20px,10px 20px; background-size:50px 60px,70px 90px,110px 130px; background-origin:content-box,content-box,content-box; background-clip:padding-box,padding-box,padding-box; background-color:#aaa;
如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：
缩写方式：
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position:10px 20px; background-size:50px 60px,70px 90px,110px 130px; background-origin:content-box; background-clip:padding-box; background-color:#aaa;
如果定义了多个背景图片，而 <' background-origin '> 和 <' background-clip '> 设置了相同的值。可这样缩写：
缩写方式：
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box, url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box, url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;
这表示 <' background-origin '> 和 <' background-clip '> 都使用了padding-box参数值。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
| Multiple backgrounds | 6.0-8.0 | 2.0-3.5 | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
| 9.0+ | 3.6+ | |||||||
| background-size #1 | 6.0-8.0 | 2.0-3.5 | 4.0-14.0 | 6.0-6.1 | 15.0+ | 6.0-6.1 | 2.1-4.3 | 18.0+ |
| 9.0+ | 3.6+ | 15.0+ | 7.0+ | 7.0+ | 4.4+ | |||
| background-origin background-clip #2 | 6.0-8.0 | 2.0-3.5 | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1-2.3 | |
| 9.0+ | 3.6+ | 3.0+ |
<' background-size '> 写入缩写方式。
<' background-origin '> || <' background-clip '> 写入缩写方式。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Multiple backgrounds_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{
width:300px;
height:300px;
background:url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box,
url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box,
url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa;
}
</style>
</head>
<body>
<div class="test">定义多重背景图像</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例