最新的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對象