码农教程 - 一技在手,衣食无忧! tools

目录

style background 属性

❮上一节 ❮ 样式对象参考 下一节❯

示例

设置文档背景的样式：

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

下面有更多 "亲自试一试" 示例。

描述

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

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

DOM属性 CSS 属性
背景附件 背景附件
背景剪辑 背景剪辑
背景颜色 背景颜色
背景图 背景图
背景来源 背景起源
背景位置 背景位置
背景重复 背景重复
背景大小 背景大小

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

也可以看看：

HTML 样式：背景属性

CSS 教程：CSS 背景

CSS3教程：CSS3 背景

CSS 参考：背景属性

语法

返回背景属性：

object.style.background

设置背景属性：

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

属性值

Value Description
attachment Sets if a background image is fixed or scrolls
clip Sets the painting area of a background image
color Sets the background color of an element
image Sets the background image for an element
origin Sets the background positioning area
position Sets the starting position of a background image
repeat Sets how a background image will be repeated
size Sets the size of a background image
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

技术细节

默认值： 透明无重复滚动0％0％自动填充框边框框
返回值： 一个字符串，代表元素的背景
CSS版本 CSS1

浏览器支持

background是 CSS1 (1996) 的一项功能。

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

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes

笔记

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

  • 背景剪辑
  • 背景起源
  • 背景大小

更多示例

示例

更改 DIV 元素的背景：

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

示例

设置文档的背景颜色：

document.body.style.backgroundColor = "red";
亲自试一试 »

示例

为文档设置背景图片：

document.body.style.backgroundImage = "url('img_tree.png')";
亲自试一试 »

示例

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

document.body.style.backgroundRepeat = "repeat-y";
亲自试一试 »

示例

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

document.body.style.backgroundAttachment = "fixed";
亲自试一试 »

示例

更改背景图片的位置：

document.body.style.backgroundPosition = "top right";
亲自试一试 »

示例

返回文档的背景属性值：

document.body.style.background;
亲自试一试 »

❮上一节 ❮ 样式对象参考 下一节❯