溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS實現(xiàn)切割圖片只取圖片中一部分”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
切割圖片這里不是真正的切割，只是用CSS取圖片中的一部分而已。這樣做的好處就是減少了打開網頁時請求圖片的次數(shù)。主要有兩種方式，一是做為某一元素的背景圖片，二是用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)參數(shù)說明如下：
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;這是用于使用絕對值來定位元素。
“CSS實現(xiàn)切割圖片只取圖片中一部分”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
