精通CSS進階Web標準解決方案:背景映像基礎

    既然你已經掌握了理論，我們就開始把理論運用到實踐中。當今的Web是一種視覺效果非常豐富的媒體。簡便的映像標籤使網頁設計人員能夠將毫無趣味的文檔變成圖形豐富的瀏覽體驗。圖形設計人員很快就掌握了image標籤（原本是作為向網站中添加可視內容的方式），將它作為對頁面進行視覺修飾的方式。實際上，如果沒有發明image標籤，那麼可能就沒有網頁設計師這種職業。

    不幸的是，對image標籤的濫用導致純修飾性的映像把頁面弄亂了。好在CSS使我們能夠在頁面上顯示映像，而不需要讓映像成為標籤的一部分。實現方法是將映像作為背景添加到現有的元素中。本章將通過一系列實際樣本講解如何使用背景映像建立各種有意思且有用的技術。

    在本章中，你將學習：

    □  固定寬度和可變寬度的圓角框。

    □  滑動門技術。

    □  山頂角。

    □  CSS陰影。

    □  用於IE 5.x和更高版本的PNG透明度支援。

    □  映像替換。

    3.1  背景映像基礎

    應用背景映像是很容易的。如果希望網站有一個好看的背景，那麼只需將映像作為背景應用於主體元素：

    body {
      background: url(pattern.gif);
      }

    瀏覽器的預設行為是水平和垂直地重複顯示這個映像，讓映像平鋪在整個頁面上。可以選擇背景映像是垂直平鋪、水平平鋪，還是根本不平鋪。

    目前漸層非常時髦，你可能希望在頁面上應用垂直漸層。為此，需要建立一個很高但很窄的漸層映像，然後將這個映像應用於頁面的主體並讓它水平平鋪：

    body{
    background: #ccc url(gradient.gif) repeat-x;
    }

    因為這個漸層映像的高度是固定的，所以如果頁面內容的長度超過了映像的高度，那麼漸層就會突然終止。可以建立一個非常長的映像，逐漸層化到一個固定的顏色。但是，很難預測頁面會有多長。實際上，只需再添加一個背景顏色。背景映像總是出現在背景顏色的上面，所以當映像結束時，顏色就會顯示出來了。如果選擇的背景顏色與漸層底部的顏色相同，那麼映像和背景顏色之間的轉換就看不出來了。

    平鋪映像在某些情況下很有用。但是，在大多數情況下，希望在頁面上添加不進行平鋪的映像。例如，假設希望在網頁的開頭顯示一個大的品牌映像，那麼只需將映像直接添加到頁面上，在許多情況下這樣做就夠了。但是，如果映像不包含資訊，是純裝飾性的，那麼可能希望將映像從其餘內容中分離出來。實現的方法是在HTML中為這個映像建立一個“鉤子”，然後使用CSS應用這個映像。在下面的樣本中，我在標記中添加一個空的div並且給它設定ID branding。然後可以將這個div的尺寸設定為與品牌映像相同，作為背景應用映像並指定不進行平鋪。

    #branding {
     width:700px;
     height:200px;
     background:url(/images/branding.gif) no-repeat;
     }

[1]  [2]  

還可以設定背景映像的位置。假設希望在網站的每個標題上添加一個符號，3-1所示。可以編寫下面這樣的代碼：
    h1 {
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat left center;
      } 

 

    圖3-1  使用背景映像建立符號

    最後兩個關鍵字指出映像的位置。在這個樣本中，映像定位在元素的左邊並且垂直置中。除了使用關鍵字之外，還可以使用像素或百分數等單位設定背景映像的位置。

    如果使用像素設定背景位置，那麼映像左上方到元素左上方的距離為指定的像素數。所以，如果指定垂直和水平位置都是20像素，那麼映像左上方出現在元素左上方下面20像素、左邊20像素的地方。但是，使用百分數進行背景定位的工作方式不太一樣。百分數定位並不對背景映像的左上方進行定位，而是使用映像上的一個對應點。所以，如果指定垂直和水平位置都是20%，那麼實際上將映像上距離左上方20%的點定位到父元素上距離左上方20%的位置（見圖3-2）。

    圖3-2  在使用像素進行背景映像定位時，使用映像的左上方。在使用百分數進行背景映像定位時，使用映像上的對應位置

    如果希望使用百分數而不是關鍵字實現前面的樣本，那麼要將垂直位置設定為50%，這會使符號地圖像垂直置中：

    h1 {
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat 0 50%;
      }

    規範指出，不要將像素或百分數等單位與關鍵字混合使用。這似乎是一個沒有意義的規則，而且許多現代瀏覽器故意忽略了這個規則。但是，混合使用單位和關鍵字在某些瀏覽器上會導致錯誤，而且很可能使頁面失效。因此，最好不要混合使用單位和關鍵字。

    儘管背景映像是一個容易掌握的概念，但是它們構成了許多進階CSS技術的基礎。

購買《精通CSS:進階Web標準解決方案》：http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414

[1]  [2]