background

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color , image , origin 与 size , repeat 方式等等。

此属性是一个简写属性，可以在一次声明中定义一个或多个属性： background-clip 、 background-color 、 background-image 、 background-origin 、 background-position 、 background-repeat 、 background-size ，和 background-attachment 。

对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。

示例 

/* 使用  */
background: green;

/* 使用  和  */
background: url("test.jpg") repeat-y;

/* 使用  和  */
background: border-box red;

/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 background

语法：

background ：<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;

例子 

//HTML
<p class="topbanner">
  starry sky<br/>
  twinkle twinkle<br/>
  starry sky
</p>
<p class="warning">here is a paragraph<p>

//CSS
.warning { 
  background: red; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
}

下篇： background-color