在本章中，你將學習：
- 固定寬度和可變寬度的圓角框。
- 滑動門技術。
- 山頂角。
- CSS陰影。
- 用於 IE5.x 和更高版本的 PNG 透明度支持。
- 圖像替換。
3.1 背景圖像基礎
#branding {
width: 700px;
height: 200px;
background: url(/images/branding.gif) no-repeat;
}
還可以設置背景圖像的位置。假設希望在站點的每個標題上添加一個符號，如圖 3-1 所示。可以編寫下面這樣的代碼：
h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat left center;
}
最後兩個關鍵字指出圖像的位置。在這個示例中，圖像定位在元素的左邊並且垂直居中。除了使用關鍵字之外，還可以使用像素或百分數等單位設置背景圖像的位置。
如果使用像素設置背景位置，那麼圖像左上角到元素左上角的距離爲指定的像素數。所以，如果指定垂直和水平位置都是 20 像素，那麼圖像左上角出現在元素左上角下面 20 像素、左邊 20像素的地方。
但是，使用百分數進行背景定位的工作方式不太一樣。百分數定位並不對背景圖像的左上角進行定位，而是使用圖像上的一個對應點。所以，如果指定垂直和水平位置都是20%，那麼實際上將圖像上距離左上角 20% 的點定位到父元素上距離左上角 20% 的位置 (見圖3-2)。
如果希望使用百分數而不是關鍵字實現前面的示例，那麼要將垂直位置設置爲 50% ，這會使符號圖像垂直居中：
h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat 0 50%;
}
規範指出，不要將像素或百分數等單位與關鍵字混合使用。這似乎是一個沒有意義的規則，而且許多現代瀏覽器故意忽略了這個規則。但是，混合使用單位和關鍵字在某些瀏覽器上會導致錯誤，而且很可能使頁面失效。因此，最好不要混合使用單位和關鍵字。
儘管背景圖像是一個容易掌握的概念，但是它們構成了許多高級 CSS 技術的基礎。
3.2 圓角框
對基於CSS的設計最初的批評意見之一是CSS太死板了，只能建立方框。爲了解決這個問題，人們開始創建具有曲線的設計。圓角框很快成爲最時髦的CSS技術之一。創建圓角框有好幾種方法。每種方法各有優缺點，對這些方法的選擇主要依賴於實際情況。
3.2.1 固定寬度的圓角框
最容易創建的是固定寬度的圓角框。它們只需要兩個圖像：一個圖像用於框的頂部，另一個用於底部。例如，假設希望創建圖 3-3 這樣的框樣式。
這個框的標記如下：
<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>
需要用圖形軟件創建兩個圖 3-4 這樣的圖像：一個圖像用於框的頂部，另一個用於底部。這個示例以及本書中其他所有示例的代碼和圖像可以從 www.friendsofed.com下載。
然後，將頂部圖像應用於標題元素，將底部圖像應用於 div 框的底部。因爲這個框樣式是單色的，所以可以在 div 框上添加背景顏色，從而形成框的主體。
.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
我們不希望內容碰到框的邊界，所以還需要在 div 中的元素上添加一些填充：
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}
這個方法對於單色而且沒有邊框的簡單框是有效的。但是，如果希望創建像圖 3-5 這樣更生動的樣式，那怎麼辦？
實際上，可以使用相同的方式，但是這一次不在框上設置背景顏色，而是設置一個重複顯示的背景圖像。還需要將底部曲線圖像應用到另一個元素上。在這個示例中，
我使用框中的最後一個段落元素：
.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}
<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>
圖3-6所示爲生成的框。因爲沒有給這個框設置高度，所以它會隨着文本尺寸的增加進行垂直擴展。
靈活的圓角框
如果加大字號，前面的示例都會垂直擴展。但是，它們不會水平擴展，因爲框的寬度必須與頂部和底部的圖像的寬度一致。如果希望創建靈活的框，那麼需要採用略有不同的方法。不用單一圖像組成頂部和底部曲線，而是用兩個相互重疊的圖像 (見圖3-7)。
隨着框尺寸的增加，大圖像有更多的部分顯露出來，這樣就實現了框擴展的效果。這個方法有時候被成爲 滑動門技術 (sliding doors technique)
，因爲
一個圖像在另一個圖像上滑動，將它的一部分隱藏起來。這個方法需要更多的圖像，所以必須在標記中添加兩個額外的無語義元素。
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
這個方法需要四個圖像: 兩個頂部圖像組成頂部曲線，兩個底部圖像組成底部曲線和框的主體 (見圖 3-8)。因此，底部圖像的高度必須與框的最大高度相同。
分別將這些圖像命名爲 top-left.gif、top-right.gif、bottom-left.gif 和 bottom-right.gif。
首先，將 bottom-left.gif 應用於主框 div，將 bottom-right.gif 應用與外邊的 div 。接下來，將 top-left.gif 應用於內部 div，將top-right.gif應用於標題。
最後，添加一些填充以便在內容周圍形成一點兒空白。
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
在這個示例中，我以 em 爲單位設置框的寬度，所以在瀏覽器中增加文本尺寸時框會伸展 (見圖3-9)。當然，可以用百分數設置寬度，這使框根據瀏覽器窗口的尺寸進行擴展或收縮。這是彈性和靈活佈局背後的主要原則之一，在本書後面會進一步討論這些原則。
添加兩個額外的無語義元素是不理想的。如果只有很少的幾個框，那麼這是可以容忍的。但是，如果用到圓角框的地方很多，那麼可以使用 JavaScript (和 DOM)添加額外元素。關於這個主題的更多細節，請參考 http://tinyurl.com/82y81 上 456 Berea Street 的 Roger Johansson 所寫的文章。
3.2.2 山頂角
山頂角 (mountaintop corner) 是一個簡單但非常靈活的概念，是由 www.simplebits.com 的 Dan Cederholm 首創的，他是暢銷書 Web Standards Solutions (friends of ED, 2004) 的作者。假設希望創建一系列具有不同顏色的圓角框。如果使用前面的方法，就必須爲每種顏色方案創建不同的角圖像。如果只有幾個方案，那麼這個方法也可以，但是，如果想讓用戶創建自己的顏色方案，那麼該怎麼辦？可能必須在服務器上動態地創建角圖像，這是非常複雜的。幸運的是，有另一個辦法。並不創建有顏色的角圖像，而是創建曲線形的位圖角蒙板 (見圖3-10)。蒙板區域蓋住背景顏色，而角區域實際上是透明的。當放在有顏色的框上時，它們形成曲線形框的效果 (見圖 3-11)。
因爲這些角蒙板是位圖，所以對於小曲線效果最好。如果使用大麴線，那麼它會出現鋸齒，不好看。
基本的標記與前一個方法相似，它需要四個元素來應用四個角蒙板：
<div class="box">
<div></div>
</div>