The CSS backgroun-color in HTML

CSS background-color 的使用

瀏覽器對底色不同的詮釋

或許你會對這個問題嗤之以鼻，background-color 就是為標籤元件上底色嘛，這誰不知道。於是你可能信心滿滿的打這樣的 HTML Code ：

<HTML>
    ABCDEFG
    <DIV STYLE="background-color:yellow;">
    </DIV>
    1234567
</HTML>

可你實際用瀏覽器看一下，你會發覺除了 ABCDEFG,1234567 之外，你看不到任何黃色區塊，聰明的你一定會說，那是因為 DIV 標籤裏沒有內容嘛，打幾個字進去就成了，於是我們把 HTML Code 改成：

<HTML>
    ABCDEFG
    <DIV STYLE="background-color:yellow;">
        輸入內容顯示區塊底色。
    </DIV>
    1234567
</HTML>

的確，跑出個黃色區塊來了，如果你從來只用 IE or NS 一種瀏覽器看網頁，你或許很滿意這結果，但如果你曾用 IE 和 NS 看同一份網頁，你會得到的結果，請按這裏。也就是說縱使同樣的 block 元件，兩家瀏覽器對其區塊範圍的解釋卻是不同的，雖然嚴格說來這是區域定義的問題，但其結果確實影響了你底色的著色範圍。

無內容區塊的上底色

上面所說，要能顯現區塊底色，必須要在區塊中輸入文字或其他內容。但如果需要一個無任何內容，但佔有一定區域的區塊，並且塗滿底色，那 Explorer 可以藉由設定區塊寬度及高度來解決這個問題，例如我們使用這樣的 HTML Code：

<HTML>
    這是 DIV 區塊之前的文字
    <DIV STYLE="background-color:yellow;width:6em;height:2em;">
    </DIV>
    這是 DIV 區塊之後的文字
</HTML>

執行結果請按這裏。從範例可以得知，不管你高度和寬度怎麼設，沒有內容的區塊，在 Netscape 中是不佔有任何區域的，就算 CSS position 屬性設為 relative or absolute ，結果都一樣。

參差不齊的底色區塊

無內容即不佔有區域，和無內容也可佔有區域，代表了 Netscape 和 Explorer 對 CSS 區塊處理的原則，前面同樣的 CSS 設定，卻表現不同結果，正是這個原因造成的，倒底誰的比較好，就有些見仁見智了。但底下要談的這個例子，Netscape 的表現可就要讓網頁設計師十分苦惱了。它的程式碼如下：

<DIV STYLE="backgound-color:yellow;">
    1<BR>
    12<BR>
    123<BR>
    1234<BR>
    12345<BR>
</DIV>

在 Explorer 中的顯示結果請按這裏，在 Netscape 中的顯示結果請按這裏。 Netscape 的這種處理方式實在對版面的美觀和統一上，令人頭疼。我的解決方式是為這區塊加個 STYLE="background-image:url(底色圖片);" 來解決，底色圖片是什麼，就是這個 → BackgroundImage

小東西，一個 16*16 ，與區塊底色同色(本頁是黃色)的小 Gif 圖，用來補滿 Netscape 中，沒有文字區域的空白。事實上範例之所以能在 Netscape 中顯現完整的方型區域，用的就是這一招。

bgColor 不等於 background-color

雖然我們在標籤擬 LAYER 化一文中提到在 Netscape 中，可借由設定 CSS position 屬性來使 HTML Block-Level 標籤擬 Layer 化。但我們卻要分清楚，CSS background-color 所填塗的，和 Layer bgColor 所填塗的是不同的區域，而不管它們原本是標準的 layer 元件，或擬 layer 元件。譬如你可以這麼設定 HTML ：

<DIV ID="layer1" STYLE="position:relative;
 background-color:yellow;left:2em;top:1em;width:10em;height:4em;">
    黃色是 background-color 填塗範圍
</DIV>
<!-- 先用黃色做底色來填塗擬 Layer 元件背景區 // -->

再用 Script 敘述為擬 Layer 元件塗上 bgColor 底色：

var turn=false;

function ChangeBlockbgColor()
{
    turn=!turn;
    var cvalue=(turn)?"green":null;
    if (document.layers) {document.layers.layer1.bgColor=cvalue;}
    /* 將擬 layer 元件的 bgColor 塗成綠色 */
}

結果請按這裏。但如果我們在 Netscape 中改用標準的 LAYER 和 ILAYER 標籤配合 CSS background-color 的設定如下：

<ILAYER ID="layer1" STYLE="position:relative;
 background-color:yellow;left:2em;top:1em;width:10em;height:4em;">
    黃色是 background-color 填塗範圍
</ILAYER>
<!-- 先用黃色做底色來填塗擬 Layer 元件背景區 // -->

結果就會變成這樣。因為這些差異，所以我們要動態改變 Netscape 中 layer 元件的 background-color 和 bgColor 時，要注意這些差異。

回前頁