設定元件的背景風格。
可以同時設定背景的 background-attachment, background-color, background-image, background-position, background-repeat。使用此特徵時，會先將所有背景的特徵設為初值，然後再依據後接的特徵值設定個別的特徵。可設的特徵值，請參考各個特徵的說明。
- 風格用法：
<p style='background:center center scroll
red no-repeat url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg");
width:250px; height:250px; font-size:32px; color:black' >
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</p> - 執行結果：
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
當背景圖有設定時，此特徵可指定背景圖是固定於視窗或是隨著文件滾動。請參考下面 background-image 中的範例。特徵值可設為：
- fixed：背景圖固定於視窗。
- scroll：背景圖隨著文件滾動，此為預設值。
- inherit：繼承父元件特徵。
設定元件背景的圖像。特徵值可設為：
- <uri>：指定 圖像的網址。
- none：無圖，此為預設值。
- inherit：繼承父元件特徵。
- 風格用法：
<p style='background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
width:250px; height:250px; font-size:32px; color:gold' >
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</p> - 執行結果：
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
- 由於背景圖設為 background-attachment:fixed，所以背景圖與文字的相對位置是變動的。
- background-attachment:fixed 在 IE6 失敗；IE8, Firefox3.0, Safari, Chrome 都成功。
在 IE6 使用 background-attachment:fixed。IE6 的 fixed 使用與其它瀏覽器有不同。首先 fixed 用在 BODY 元素 一切正常。如果用在其它元素，則該元素必須設定 overflow:auto, overflow:scroll。這時移動元素的捲軸鈕可以看出背景圖是固定。但是移動父元素的捲軸鈕，則背景圖會隨著滾動；這點與其它瀏覽器不同；依據 CSS 的定義，fixed 是將背景圖固定在網頁上，因此不論移動視窗, 父元素或子元素的捲軸鈕，背景圖都應該是固定的。
- 風格用法：
<style type='text/css'>
.bkg5 {width:300px;
height:300px;
color:red;
overflow:auto;
background:center center fixed repeat url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg")
}
</style>
<div style='width:400px; height:240px; overflow:scroll'>
<div class=bkg5>
<p>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
<p>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
<p>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
<p>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</div>
</div> - 執行結果：
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.bkg {display:block;
width:350px; height:250px;
border:solid 1px blue;
}
.bkg:hover {background:center center scroll
red no-repeat url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg");}
.bkg:active {background-repeat:repeat;}
</style>
<a href='javascript:void(0)' class=bkg>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</a> - 執行結果： 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
javascript 應用。可以用 style 物件 的特徵 background, backgroundAttachment, backgroundImage 讀取或設定特徵值。
- 風格用法：
<div id='atr' style='background:red; width:200px; height:150px'>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲.
</div>
<script type='text/javascript'>
var os=document.getElementById('atr').style;
document.write( os.background
+'<br />'+ os.backgroundAttachment
+'<br />'+ os.backgroundImage );
</script> - 執行結果：射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲.red
initial
initial
- 不同瀏覽器的輸出格式有不同。
