在這一篇中, 我會介紹
整個網頁的背景色與背景圖
在之前的文章中(參考「HTML基礎教學(4)--幫網頁加上顏色(上)」一文), 有提到過可以在 BODY 標籤上設定 bgcolor 屬性, 來幫網頁加上底色, 這裡用個簡單的例子再來複習一下
其中, bgcolor 的屬性值 #AAAAFF 是一個 16 進位的顏色值(可參考「HTML基礎教學(4)--幫網頁加上顏色(下)」一文的說明)
在 HTML 中, 除了可以幫網頁設背景色之外, 還可以利用 background 屬性來設定背景圖, 看看下面的例子
我們可以看到底圖會像貼磁磚一樣, 一直重覆的排列, 佔滿整個視窗。一般來說, 底圖的顏色會比較淡, 或是跟內容顏色有反差, 否則就會像上例一樣, 內容文字會看不清楚
另外, 上例中由於內容較長, 產生了垂直的捲軸(ScrollBar), 當你往下拉時可以發現到底圖是跟著捲動的, 若想要讓它固定, 不跟著捲動, 那麼可以利用 bgproperties 屬性來做控制(只有 IE 支援, 目前 Firefox 只能用 CSS 才能做到), 如下例
註：為了讓內容清楚一點, 我另外設了 text 屬性來改變字的顏色, 它跟 bgproperties 屬性是無關的
表格的背景色與背景圖
在 TABLE 標籤中, 其實也有 bgcolor 與 background 屬性, 設定的方式與 BODY 標籤一樣, 下例中有兩個表格, 分別設定 bgcolor 與 background 屬性
註：
1. 同樣的, 為了讓內容清楚一點, 我改變了字的顏色
2. 為了讓背景圖的效果更清楚一點, 我加大了上面第二個表格的長寬
我們可以看到, 表格中的背景圖一樣會像貼磁磚一樣, 一直重覆的排列, 直到佔滿整個表格
--gs--
{HTML基礎教學}{背景色}{背景圖}{表格}{顏色}
- 如何設定整個網頁的背景色與背景圖
- 如何設定表格的背景色與背景圖
整個網頁的背景色與背景圖
在之前的文章中(參考「HTML基礎教學(4)--幫網頁加上顏色(上)」一文), 有提到過可以在 BODY 標籤上設定 bgcolor 屬性, 來幫網頁加上底色, 這裡用個簡單的例子再來複習一下
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#AAAAFF">
123
</BODY>
</HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#AAAAFF">
123
</BODY>
</HTML>
其中, bgcolor 的屬性值 #AAAAFF 是一個 16 進位的顏色值(可參考「HTML基礎教學(4)--幫網頁加上顏色(下)」一文的說明)
在 HTML 中, 除了可以幫網頁設背景色之外, 還可以利用 background 屬性來設定背景圖, 看看下面的例子
<HTML>
<HEAD>
</HEAD>
<BODY background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>
</BODY>
</HTML>
<HEAD>
</HEAD>
<BODY background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>
</BODY>
</HTML>
我們可以看到底圖會像貼磁磚一樣, 一直重覆的排列, 佔滿整個視窗。一般來說, 底圖的顏色會比較淡, 或是跟內容顏色有反差, 否則就會像上例一樣, 內容文字會看不清楚
另外, 上例中由於內容較長, 產生了垂直的捲軸(ScrollBar), 當你往下拉時可以發現到底圖是跟著捲動的, 若想要讓它固定, 不跟著捲動, 那麼可以利用 bgproperties 屬性來做控制(只有 IE 支援, 目前 Firefox 只能用 CSS 才能做到), 如下例
<HTML>
<HEAD>
</HEAD>
<BODY bgproperties="fixed" text="#00ff00" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>
</BODY>
</HTML>
<HEAD>
</HEAD>
<BODY bgproperties="fixed" text="#00ff00" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>這是內容<BR>
</BODY>
</HTML>
註：為了讓內容清楚一點, 我另外設了 text 屬性來改變字的顏色, 它跟 bgproperties 屬性是無關的
表格的背景色與背景圖
在 TABLE 標籤中, 其實也有 bgcolor 與 background 屬性, 設定的方式與 BODY 標籤一樣, 下例中有兩個表格, 分別設定 bgcolor 與 background 屬性
<HTML>
<HEAD>
</HEAD>
<BODY text="#00ff00">
<TABLE bgcolor="#800000">
<TR>
<TD>ABC</TD>
</TR>
</TABLE>
<TABLE width="50%" height="50%" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
<TR>
<TD>ABC</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HEAD>
</HEAD>
<BODY text="#00ff00">
<TABLE bgcolor="#800000">
<TR>
<TD>ABC</TD>
</TR>
</TABLE>
<TABLE width="50%" height="50%" background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg">
<TR>
<TD>ABC</TD>
</TR>
</TABLE>
</BODY>
</HTML>
註：
1. 同樣的, 為了讓內容清楚一點, 我改變了字的顏色
2. 為了讓背景圖的效果更清楚一點, 我加大了上面第二個表格的長寬
我們可以看到, 表格中的背景圖一樣會像貼磁磚一樣, 一直重覆的排列, 直到佔滿整個表格
--gs--
{HTML基礎教學}{背景色}{背景圖}{表格}{顏色}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除