當然用這個技巧也要選對地方用才行，要是經常需要改動的圖像用這個技術還是有點折騰的。
核心的屬性是這個：background-position 參數值從w3schools找出來的
Property Values
| VALUE | DESCRIPTION |
|---|---|
|
top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the second value will be “center”. Default value is: 0% 0% |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| inherit | Specifies that the setting of the background-position property should be inherited from the parent element |
這裏有篇不錯的文章描述的是下面這個例子，將原圖豎着的1234顯示成橫着的4個盒子
CSS:
Using Percentages in Background-Image
下面這個例子也是常用到的：
鼠標移到按鈕上，用稍微亮一點點的圖片顯示的懸停效果。
用到的green.png原圖：
按鈕的代碼:
|
1
|
<aclass="green"href="#">Green<span>
</span></a> |
按鈕的CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
a
{ /*
The section titles */ display:block; font-size:21px; height:34px; overflow:hidden; padding:10px20px
0; position:relative; width:200px;}a
{ text-decoration:none;}a:hover{ /*
Removing the inherited underline from the titles */ text-decoration:none;}a
span{ /*
This span acts as the right part of the section's background */ height:44px; position:absolute; right:0; top:0; width:4px; display:block;}a.green{background:url(img/green.png)repeat-xtop
left;color:#436800;}a.greenspan{
background:url(img/green.png)repeat-xtop
right;}/*
The hover effects */a:hover{background-position:bottomleft;} |
最重要的一行，鼠標移上去的時候設置圖像的位置爲bottom left，而下半部分的圖像比上半部分亮一點。
效果如下:
最後一個按鈕樣式和第一個其實是一樣的，只不過最後是從sprite.png加載過來的，我使用了CSS
圖片拼合生成器將四張圖拼接起來了，然後再用CSS去定位。
拼接完成之後的圖：
這是另外一篇不錯的參考
爲了加快頁面訪問速度，我們可能會想到多種可行的辦法：如提升硬性條件方面的性能、減少HTTP請求次數，使用Cache，合併文件（aoao總結的把js和css合併成一個文件非常好玩）等等。
這裏主要講一下如何節省圖片的請求次數，至於如何能減少圖片請求，不外乎就是減少實際圖片的數量和代碼的編寫質量。
那麼，如何才能減少圖片的數量呢？我們可以把一些不經常變動的圖片由原來分割成的多張小圖合併成一張，然後通過CSS背景切割來加快完成渲染，這樣就減少了實際圖片的數量，也就減少了部分圖片請求。至於這種技術，我們暫時叫它css sprites。
如下面這個圓角框架的處理：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm］
CSS部分：
#list{
width:198px;
}
.hd,.ft{
background:url(skin/bg_01.gif) no-repeat;
}
.hd h3{
height:30px;
line-height:30px;
text-indent:5px;
}
.bd{
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:5px;
}
.ft{
overflow:hidden;
height:6px;
background-position:left bottom;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DY CSS圖片切割</title>
<meta name="description" content="使用css sprites技術切割合併背景圖片以減少HTTP請求" />
<meta name="keywords" content="css sprites, 圖片切割, 圖片合併, HTTP請求" />
<meta name="Author" content="Doyoe(飄零霧雨), [email protected]" />
</head>
<body>
<div id="list">
<div class="hd"><h3>頂部邊框（標題）</h3></div>
<div class="bd">正文<br />大段正文內容<br />還可以寫更多的內容</div>
<div class="ft"><!--底部邊框--></div>
</div>
</body>
</html>
以往做圓角的東東，一般可能會做成2，3張圖片。而可以看到，這個例子僅用了一張圖片，所以也會減少不少圖片請求。
先看一下CSS是如何寫的：首先在.top和.bot中定義了背景圖片，這是自然的，要用背景肯定得定義背景圖片，這是天經地義的，這裏肯定沒有什麼出採的地方。接着設置background-position樣式來達到只顯示背景圖的某個區域。
因爲.top和.bot調用的是同一張背景圖片，所以就同時給它們定義，省得單獨需要定義2次，這樣寫也減少了不少字節哦：）
再一個疑問就是中間部分是如何解決邊框問題的。可以看到，只需要定義左右兩邊的border就可以搞定。
至此，關於合併圖片，並利用CSS進行背景切割以減少請求的簡單例子就搞定了。