CSS3中有一種新的屬性叫做img裁剪(clip),它可以通過指定矩形坐標來裁剪圖片,讓圖片只顯示指定區域的內容,非常實用。
使用img裁剪需要以下步驟:
img { position: absolute; /* 先將圖片定位 */ clip: rect(0px, 100px, 100px, 0px); /* 定義裁剪區域 */ }
其中clip屬性的值由四個參數構成,分別表示上、右、下、左四個方向的裁剪長度。比如上例中,(0px, 100px, 100px, 0px)表示上端距離原圖頂部0像素,右邊距離原圖左側100像素,下邊距離原圖頂部100像素,左邊距離原圖左側0像素,所以最終呈現出的圖片是一個100×100的正方形。
需要注意的是,使用img裁剪必須設置元素的position屬性為absolute或fixed。另外,clip屬性的兼容性并不好,建議僅在必要時使用。
上面是CSS3中img裁剪的相關介紹,希望對各位讀者有所幫助。