HTML 背景 · W3School HTML & CSS 教程

# HTML 背景 **好的背景使站點看上去特別棒。** ## 實例 [搭配良好的背景和顏色](/tiy/t.asp?f=html_back_good) ``` <html> <body bgcolor="#d0d0d0"> <p> 這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。 </p> <p> 這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。 </p> </body> </html> ``` [搭配得不好的背景和顏色](/tiy/t.asp?f=html_back_bad) ``` <html> <body bgcolor="#ffffff" text="yellow"> <p> 這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。這是段落。 </p> <p> 這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。這是另一個段落。 </p> </body> </html> ``` （[可以在本頁底端找到更多實例](#more_examples)。） ## 背景（Backgrounds） <body> 擁有兩個配置背景的標簽。背景可以是顏色或者圖像。 ### 背景顏色（Bgcolor）背景顏色屬性將背景設置為某種顏色。屬性值可以是十六進制數、RGB 值或顏色名。 ``` <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> ``` 以上的代碼均將背景顏色設置為黑色。 ### 背景（Background）背景屬性將背景設置為圖像。屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。 ``` <body background="clouds.gif"> <body background="http://www.w3school.com.cn/clouds.gif"> ``` URL可以是相對地址，如第一行代碼。也可以使絕對地址，如第二行代碼。提示：如果你打算使用背景圖片，你需要緊記一下幾點： * 背景圖像是否增加了頁面的加載時間。小貼士：圖像文件不應超過 10k。 * 背景圖像是否與頁面中的其他圖象搭配良好。 * 背景圖像是否與頁面中的文字顏色搭配良好。 * 圖像在頁面中平鋪后，看上去還可以嗎？ * 對文字的注意力被背景圖像喧賓奪主了嗎？ ## 基本的注意事項 - 有用的提示： <body> 標簽中的背景顏色（bgcolor）、背景（background）和文本（text）屬性在最新的 HTML 標準（HTML4 和 XHTML）中已被廢棄。W3C 在他們的推薦標準中已刪除這些屬性。應該使用層疊樣式表（CSS）來定義 HTML 元素的布局和顯示屬性。 ## <a id="more_examples">更多實例</a> [可用性強的背景圖像](/tiy/t.asp?f=html_back_img) ``` <html> <body background="/i/eg_bg_06.gif"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁面，圖像會進行重復。</p> </body> </html> ``` [可用性強的背景圖像 2](/tiy/t.asp?f=html_back_img2) ``` <html> <body background="/i/eg_bg_04.gif"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁面，圖像會進行重復。</p> </body> </html> ``` [可用性差的背景圖像](/tiy/t.asp?f=html_back_imgbad) ``` <html> <body background="/i/eg_bg_01.gif"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小于頁面，圖像會進行重復。</p> </body> </html> ```