利用CSS裁切圖片

在網頁設計上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！

css的overflow屬性

設定成overflow: hidden就可以將多餘的圖片隱藏起來，並利用margin來控制要顯示的部分。

範例：

原本的完整圖片

使用css裁切過後

css的clip屬性

clip的屬性值僅有rect( 矩形 )，其值為 rect (top, right, bottom, left)，預設值為auto，而必須注意的是此屬性要有position:absolute才會生效，圖片顯示範圍的計算為top減掉bottom為顯示範圍的高，right減掉left為顯示範圍的寬。

範例：