CSS background 屬性 · W3School CSS 參考手冊

# CSS background 屬性 ## 實例如何在一個聲明中設置所有背景屬性： ``` body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 background 屬性。注釋：IE8 以及更早的瀏覽器不支持一個元素多個背景圖像。注釋：IE7 以及更早的瀏覽器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。 ## 定義和用法 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" | | --- | --- | ## 可能的值 | 值 | 描述 | CSS | | --- | --- | --- | | _[background-color](pr_background-color.asp)_ | 規定要使用的背景顏色。 | 1 | | _[background-position](pr_background-position.asp)_ | 規定背景圖像的位置。 | 1 | | _[background-size](/cssref/pr_background-size.asp "CSS3 background-size 屬性")_ | 規定背景圖片的尺寸。 | 3 | | _[background-repeat](pr_background-repeat.asp)_ | 規定如何重復背景圖像。 | 1 | | _[background-origin](/cssref/pr_background-origin.asp "CSS3 background-origin 屬性")_ | 規定背景圖片的定位區域。 | 3 | | _[background-clip](/cssref/pr_background-clip.asp "CSS3 background-clip 屬性")_ | 規定背景的繪制區域。 | 3 | | _[background-attachment](pr_background-attachment.asp)_ | 規定背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 | | _[background-image](pr_background-image.asp)_ | 規定要使用的背景圖像。 | 1 | | inherit | 規定應該從父元素繼承 background 屬性的設置。 | 1 | ## 親自試一試 - 實例 [所有背景屬性在一個聲明之中](/tiy/t.asp?f=csse_background) 本例演示如何使用簡寫屬性來將所有背景屬性設置在一個聲明之中。 ``` <html> <head> <style type="text/css"> body { background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; } </style> </head> <body> 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 背景](/css/css_background.asp "CSS 背景") CSS3 教程：[CSS3 背景](/css3/css3_background.asp "CSS3 背景") HTML DOM 參考手冊：[background 屬性](/jsref/prop_style_background.asp "HTML DOM background 屬性")