傳說中的“三層嵌套技術”。
一、背景圖合並：
div+css+ps合圖相結合的技術；通過精確到1px的css設置，使用ps合成背景圖片，特別是小圖片合並，來完成頁面效果。
首先講講三層嵌套原理：
①要做成這個效果，用ps軟件摳出這一欄目
②繼續摳圖，截出三張這一的小圖標，高度務必一樣的大小，才能平鋪的時候一樣高度，中間的圖片一個像素就夠了。
（bac_left.png）（bac_center.png）（bac_right.png）
③現在就是寫代碼的步驟：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三層嵌套--HTMl5自由者</title>
<style type="text/css">
.bac-center {
width: 228px;
height: 44px;
background: url('bac_center.png') 0 0 repeat;
}
.bac-left {
height: 44px;
background: url('bac_left.png') 0 0 no-repeat;
}
.bac-right {
height: 44px;
background: url('bac_right.png') right 0 no-repeat;
}
</style>
</head>
<body>
<div class="bac-center">
<div class="bac-left">
<div class="bac-right"></div>
</div>
</div>
</div>
</body>
</html>
④總結：
針對三層嵌套，優點就不說了，比起整張圖片扣起來運用跟小圖標運用所帶來的加載速度還是很不錯的，
但是在大型網站，這樣一大張一大張拿出來用，真的很費勁，所以用到三層嵌套，其中帶來一個缺點就是代碼嵌套太多，標簽數量增多也增加了結構深度，同樣權衡下兩者，要求我們具體問題具體分析才是關鍵所在。
二、背景圖的合並
知道了三層嵌套的優缺點后，發現上面的圖標也都是分開的，一個個加載帶來服務器請求的壓力。所以這時候用到背景圖的合並技術。這時候PS的軟件就很大上派上用場了；
圖標合並我們要求達到這樣的一個效果：
①、弄成一張圖，注意下：原本中間的圖標我們是截取成寬度1px ,現在弄成一張圖要求寬高都要三張圖片都大小一樣，所以這里我是弄成width：38px； height：44px；
②、打開PS,在截取第一張背景圖標的時候 也就是這張 ，然后鼠標選擇菜單欄圖像--畫布大小（或者快捷鍵Ctrl+Alt+C），彈出一個框的時候，設置畫布大小，如下圖：
③、因為我們是要弄成3張圖片合並，所以高度是 44*3=132px 然后鼠標點擊定位中的↑，這樣圖片繼續切下來的時候會在第一張圖片的下面，三張才能列下來弄成一張。
④、都弄好了之后就是關鍵的代碼環節了：
<!DOCTYPE html>
<html>
<head>
<meta charset="uf-8">
<title>背景圖合並--HTMl5自由者</title>
<style type="text/css">
.bac-center {
width: 228px;
height: 44px;
background: url('bac.png') 0 -44px repeat;
}
.bac-left {
height: 44px;
background: url('bac.png') left 0 no-repeat;
}
.bac-right {
height: 44px;
background: url('bac.png') right -88px no-repeat;
/*注意定位的方向*/
}
</style>
</head>
<body>
<div class="bac-center">
<div class="bac-left">
<div class="bac-right"></div>
</div>
</div>
</div>
</body>
</html>
⑤、總結：略
引：http://blog.csdn.net/html5_/article/details/20703089