標籤：html css 樣式
使用CSS可以為html標籤指定背景映像或背景顏色，並且可以設定映像的位置。
代碼整理自w3school：http://www.w3school.com.cn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><!--（1）設定背景顏色：background-color（2）設定背景映像：background-image（3）設定背景映像的重複：background-repeat（4）背景定位：background-position（5）背景關聯：background-attachment--><head> <style> h1 {background-color:#afa} h2 {background-color:rgb(255,187,187)} div#bgImage { background-image:url(images/bg_image.jpg); padding:10px; } div#bgImageKeywords { background-color:#ddd; background-image:url(images/d_sikao.png); padding:30px; background-repeat:no-repeat; background-position:left bottom; } div#bgImagePercent { width:400px; background-color:#ddd; background-image:url(images/d_sikao.png); padding:40px; background-repeat:no-repeat; background-position:20% 80%; } div#bgImageOffset { width:400px; background-color:#ddd; background-image:url(images/d_sikao.png); padding:40px; background-repeat:no-repeat; background-position:200px 20px; } div#bgImageAttach { background-image:url(images/bg_image.jpg); padding:10px; background-attachment:fixed; } </style></head><title>CSS 背景</title><body> <h1>這是一個h1層級的標題：淡綠色</h1> <h2>這是一個h2層級的標題：淡紅色</h2> <h3>這是一個h3層級的標題（沒有設定樣式）</h3> <div id="bgImage"> <p>這個段落有背景映像，有內邊距，允許重複（預設）<p> </div> <br/> <!--使用 關鍵字 描述背景映像的位置。位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字：一個對應水平方向，另一個對應垂直方向。如果只出現一個關鍵字，則認為另一個關鍵字是 center。--> <div id="bgImageKeywords"> <p>淡灰色背景色，同時有背景映像，不允許重複，背景映像居 左下方 顯示<p> </div> <br/> <!--使用 百分比 描述背景映像的位置。百分比是映像相對於元素的位置（而不是整個瀏覽器視窗）。 如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。這一點與關鍵字類似。--> <div id="bgImagePercent" > <p>背景映像相對元素居 水平20%，垂直80% 顯示<p> </div> <br/> <!--使用 位移量 描述背景映像的位置。即映像的左上方與 background-position 聲明中的指定的點對齊。--> <div id="bgImageOffset"> <p>背景映像相對元素左上方的位移量為水平200px，垂直20px<p> </div> <br/> <!--背景關聯。如果文檔比較長，那麼當文檔向下滾動時，背景映像也會隨之滾動。當文檔滾動到超過映像的位置時，映像就會消失。--> <div id="bgImageAttach"> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> </div></body></html>：
CSS：背景顏色/背景映像
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
