background · CSS基礎

## background屬性背景縮寫屬性可以在一個聲明中設置所有的背景屬性。可以設置的屬性分別是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image. 如果上述值缺少一個，這不要緊，例如background：＃FF0000 URL（smiley.gif）;是允許的。 JavaScript 語法:object object.style.background="red url(smiley.gif) top left no-repeat" * * * ## 語法 ``` background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit; ``` | 值 | 說明 | CSS | | :-- | :-- | :-- | | *[background-color](https://www.w3cschool.cn/cssref/pr-background-color.html)* | 指定要使用的背景顏色 | 1 | | *[background-position](https://www.w3cschool.cn/cssref/pr-background-position.html)* | 指定背景圖像的位置 | 1 | | *[background-size](https://www.w3cschool.cn/cssref/css3-pr-background-size.html)* | 指定背景圖片的大小 | 3 | | *[background-repeat](https://www.w3cschool.cn/cssref/pr-background-repeat.html)* | 指定如何重復背景圖像 | 1 | | *[background-origin](https://www.w3cschool.cn/cssref/css3-pr-background-origin.html)* | 指定背景圖像的定位區域 | 3 | | *[background-clip](https://www.w3cschool.cn/cssref/css3-pr-background-clip.html)* | 指定背景圖像的繪畫區域 | 3 | | *[background-attachment](https://www.w3cschool.cn/cssref/pr-background-attachment.html)* | 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 | | *[background-image](https://www.w3cschool.cn/cssref/pr-background-image.html)* | 指定要使用的一個或多個背景圖像 | 1 | ## 實例--在一個div元素中設置多個背景圖像（并指定他們的位置）： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> body { background: #00ff00 url('/statics/images/course/smiley.gif') no-repeat fixed center; } </style> </head> <body> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text </body> </html> ```