天天看点

CSS background 属性CSS background 属性

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

默认值:

not specified

继承性:

no

版本:

CSS1 + CSS3

JavaScript 语法:

object.style.background="white url(paper.gif) repeat-y"

如何在一个声明中设置所有背景属性:

<a href="http://www.w3school.com.cn/tiy/t.asp?f=csse_background">亲自试一试</a>

如果背景图片小的花不足以铺满整个页面,可以使用重复来铺满页面。

浏览器支持

所有浏览器都支持 background 属性。

注释:IE8 以及更早的浏览器不支持一个元素多个背景图像。

注释:IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

描述

CSS

<a href="http://www.w3school.com.cn/css/pr_background-color.asp">background-color</a>

规定要使用的背景颜色。

1

<a href="http://www.w3school.com.cn/css/pr_background-position.asp">background-position</a>

规定背景图像的位置。

1

<a href="http://www.w3school.com.cn/cssref/pr_background-size.asp">background-size</a>

规定背景图片的尺寸。

3

<a href="http://www.w3school.com.cn/css/pr_background-repeat.asp">background-repeat</a>

规定如何重复背景图像。

1

<a href="http://www.w3school.com.cn/cssref/pr_background-origin.asp">background-origin</a>

规定背景图片的定位区域。

3

<a href="http://www.w3school.com.cn/cssref/pr_background-clip.asp">background-clip</a>

规定背景的绘制区域。

3

<a href="http://www.w3school.com.cn/css/pr_background-attachment.asp">background-attachment</a>

规定背景图像是否固定或者随着页面的其余部分滚动。

1

<a href="http://www.w3school.com.cn/css/pr_background-image.asp">background-image</a>

规定要使用的背景图像。

1

inherit

规定应该从父元素继承 background 属性的设置。

1

继续阅读