background

语法

  • 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 '>:指定对象的背景颜色。

说明

复合属性。检索或设置对象的背景特性(背景色 <' 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>
<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>