實現用CSS切割圖片的方法

     切割圖片這裏不是真正的切割，只是用CSS取圖片中的一部分而已。這樣作的好處就是減小了打開網頁時請求圖片的次數。主要有兩種方式，一是作爲某一元素的背景圖片，二是用img元素的屬性。

方法一：

     用CSS中元素的background : background-color || background-image || background-repeat || 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處（以圖片的左上角爲0,0）

方法二：

用img的clip屬性中的rect，clip:rect(y1 y1 x2 x1)參數說明以下：
y1=定位的y座標(垂直方向)的起點
x1=定位的x座標(水平方向)的起點
y2=定位的y座標(垂直方向)的終點
x2=定位的x座標(水平方向)的終點
注:座標的起點是在左上角

示例代碼：

img{
	position:absolute;
	clip:rect(20px 100px 50px 20px);
}

上面能夠看出控制圖片顯示的關鍵在於clip:rect(20px 100px 50px 20px)這句，千萬不要忘記position:absolute;這是用於使用絕對值來定位元素。