最新的Web开发教程
 

Style background Property

<Style对象

风格文件的背景:

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

更多"Try it Yourself"下面的例子。


定义和用法

背景属性设置或返回多达八个独立的背景属性,在一个速记形式。

有了这个属性,你可以设置/返回的一个或多个以下(以任意顺序):

  • 背景颜色
  • 背景图
  • 背景重复
  • 背景附件
  • 背景位置
  • 背景大小
  • 背景起源
  • 背景素材

上面的性质也可与单独的样式属性中设置。 强烈建议非高级作者为更好的可控性使用单独的属性。


浏览器支持

在表中的数字规定,完全支持该财产浏览器版本。

属性
background 1.0 4 1.0 1.0 3.5

注:请参阅下面的每个值单独浏览器的支持。


句法

返回背景属性:

object .style.background

设置背景属性:

object .style.background=" 属性值
描述
color 设置元素的背景颜色
image 设置背景图像的元件
repeat 设置背景图片如何将重复
attachment 设置背景图像是否固定或随页面滚动
position 设置背景图像的起始位置
size 设置背景图像的大小
origin 设置背景设定区域
clip 设置背景图像的绘画区域
initial 将此属性设置为默认值。 阅读关于初始
inherit 继承其父元素此属性。 阅读关于继承

技术细节

默认值: 透明无重复滚动0%0%自动填充盒边界盒
返回值: 一个字符串,表示元素的背景
CSS版本 在CSS3 CSS1 +新特性

更多示例

更改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";
试一试»

设置背景图片为固定(will not scroll)

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

更改背景图片的位置:

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

返回文档的背景属性值:

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

相关页面

CSS教程: CSS背景

CSS3教程: CSS3背景

CSS参考: background property


<Style对象