Style background 属性

定义和用法

background 属性以简写形式设置或返回最多八个单独的背景属性。

通过此属性，您可以设置/返回以下一项或多项（以任意顺序）：

DOM 属性 CSS 属性
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

上面的属性也可以使用单独的样式属性进行设置。强烈建议非高级作者使用单独的属性以获得更好的可控性。

另请参阅：

CSS 教程：CSS 背景

CSS3 教程：CSS3 背景

CSS 参考手册：background 属性

实例

设置文档的背景的样式：

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

亲自试一试

页面下方有更多 TIY 实例。

语法

返回 background 属性：

object.style.background

设置 background 属性：

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

属性值

值 描述
color 设置元素的背景颜色。
image 设置元素的背景图像。
repeat 设置背景图像的重复方式。
attachment 设置背景图像是固定还是随页面滚动。
position 设置背景图像的起始位置。
size 设置背景图像的大小。
origin 设置背景定位区域。
clip 设置背景图像的绘制区域。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： transparent none repeat scroll 0% 0% auto padding-box border-box
返回值： 字符串，表示元素的背景。
CSS 版本： CSS1 + new properties in CSS3

更多实例

例子 2

更改 DIV 元素的背景：

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

亲自试一试

例子 3

为文档设置背景颜色：

document.body.style.backgroundColor = "red";

亲自试一试

例子 4

为文档设置背景图像：

document.body.style.backgroundImage = "url('img_tree.png')";

亲自试一试

例子 5

将背景图像设置为不重复：

document.body.style.backgroundRepeat = "repeat-y";

亲自试一试

例子 6

将背景图像设置为固定（不会滚动）：

document.body.style.backgroundAttachment = "fixed";

亲自试一试

例子 7

更改背景图像的位置：

document.body.style.backgroundPosition = "top right";

亲自试一试

例子 8

返回文档的背景属性值：

document.body.style.background;

亲自试一试

浏览器支持

background 是 CSS1 (1996) 特性。

所有浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 支持

注释

CSS3 (1999) 中添加了三个新属性：