用css設定只顯示圖片的一部分
今天模仿網站寫頁面時，儲存一張圖片時，發現其他圖片都是用的一張整合的圖片，前幾天都是又把這些圖片拆分了。今天因為是演示購物步驟的。我覺得和在一起挺好。就在網上搜了下這個怎麼寫。發現一個還可以的描述。搜了幾個都描述的不清楚。就這個還可以。特意貼上來儲存。
CSS 對整合圖片中各部分的單獨定，在研究其他的網站的樣式的時候經常會發現一種情況，就是在很多 background 屬性裡都呼叫同一張圖片，來滿足網頁各個部分的使用。
開啟這種圖片，會發現其中包含很多小圖片：
這些小圖片就是整圖分割後的各個部分，把各個部分放在一張圖片上，而不是是分別儲存成單獨的圖片，其目的我們都知道，就是減少http請求次數，節省時間和頻寬。
那麼怎麼來實現一張圖片在不同的地方只顯示其中的一部分呢，這就用到了我們今天要說的背景圖片的定位問題。
我們知道在用圖片作為背景的時候，css要這樣寫，以div容器舉例子，也可以是body、td、p等的背景，道理一樣。
以下為引用內容：
div{ background:#FFF url(image) no-repeat fixed x y;}
這裡的background的屬性值依次為：
#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這裡是圖片的地址）
no-repeat <是否重複：（圖片小於容器的大小時，預設會重複排列圖片以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標才有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，預設是scroll）
x y 背景影象的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）
背景影象定位中我們要明確的幾點：
1、兩個值前面一個是橫向的定位，我們稱為x軸方向定位。後面一個值是縱向的定位，我們稱為y軸方向定位。如果只有一個值，那預設的就是x軸方向，這時y軸方向就預設的是上下居中對齊，也就是center。
2、座標軸的原點就是對應容器的左頂點。
3、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。
4、x y值分別表示背景圖片的左頂點相對於座標原點（也就是容器的左頂點）的值。
這是我自己做的頁面：
我用的整合圖片
：
我的css程式碼：<div style="width:479px;height:50px;border:0px solid red;background:#FFF url(images/step.gif) no-repeat;float:left;margin-left:10px;margin-top:13px;background-attachment:fixed;background-position:435px 50px;"></div>
這個應該是相對於我的div的左上角開始算畫素，圖片也是從左上角開始算畫素。比如我這張圖片大小是479px*150px。我容器div的大小是479px*50px;所以我的css是background-position:435px 50px;
其實以上的做法會導致圖片跟著滾動，一滾動就看不到要顯示的部分，在發現這個問題之後，我又查了網上的做法，發現以下的屬性可以不讓圖片滾動還是給大家傳一個網上的例子大家可以下載下來看看。
這是完整的html程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
*{
border:0;
margin:0;
padding:0;
}
#div1 {
background:url(21321321321.jpg) no-repeat; /* 從左上角的0 0點開始 */
height:40px; /* 第一張圖片的高度 */
width:120px; /* 第一張圖片的寬度 */
}
#div2 {
background:url(21321321321.jpg) -120px 0 no-repeat; /* 從左上角的-120px 0點開始,負數不明白?自己試試就知道了 */
height:70px; /* 第二張圖片的高度 */
width:129px; /* 第二張圖片的高度 */
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
下面是用到的圖片，
