css把圖片分割開的方法：1、利用background-image和background-position屬性來分割圖片；2、利用clip屬性，透過為img圖片元素設定「clip:rect(y1, y2,x2,x1);”樣式來分割圖片。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
場景：如果一個頁面有個img小圖標，那麼訪問瀏覽器的時候會因為載入圖片導致瀏覽速度放慢。這時候將這麼多的小圖示放在一起，整合成一個img，那麼只需要存取一張圖片就可以了。就可以減少請求圖片的次數
整合後的img
那麼整合後的img有了，在使用的過程中如何取得我們想要的像素範圍呢？上面的參考地址有寫。我就照著做一遍吧。
方法一
在CSS中元素的background:background-color || background-image || background-repeate || background-attachment || background-position ，範例如下：
background:transparent url(123.jpg) no-repeat scroll -140px -20px;
transparent 表示透明度無顏色
url(123.jpg) 表示背景圖片
no-repeat 表示圖片不重複
scroll 表示背景圖片隨瀏覽器下拉而捲動
-140px表示水平位置在圖片的-140px處（以圖片的左上角為0,0）
-20px 表示垂直位置在圖片的-20px處
#但是我發現上面的不適合我想要的，
上面的效果來看只能顯示圖片的右下角。那就試試第二種方法
方法二
用img 的clip 屬性中的rect ,clip:rect(y1,y2,x2,x1)參數說明如下
y1 = 定位的y 座標（垂直方向）的起點
y2 = 定位的y 座標（垂直方向）的終點
x1 = 定位的x 座標（垂直方向）的起點
x2 = 定位的x 座標（垂直方向）的終點
注意：座標的起點是在左上角
#程式碼如下：
img{
position:absolute;
clip:rect(20px ,100px , 50px , 20px);
}
在實際操作過程中，發現兩個問題：1.rect方法裡面需要帶上逗號，2.必須帶上position，需要是絕對定位，也就是absolute 或fixed屬性。
更多程式相關知識，請造訪：程式設計影片！ ！
以上是css怎麼把一張圖片分割開的詳細內容。更多資訊請關注PHP中文網其他相關文章！
