CSS clip:rect 矩形剪裁功能，截取圖片某一塊

2016-12-14 10:43

4715

最近我在制作一款主題的時候，在自適應css設計中，為了調整圖片大小，又不愿意改變圖片比例的情況下，用到了CSS剪裁功能。

說實話，這個功能在國內運用的比較少。CSS中有一個屬性叫做clip，為修剪，剪裁之意。配合其屬性關鍵字rect可以實現元素的矩形裁剪效果。此屬性安安穩穩地存在于CSS2.1中，且使用上基本上沒有類似于max-height/display:table-cell等瀏覽器的兼容性問題。但是，貌似大家很少使用此屬性。我總結了三點原因：首先是理解上有些門檻；二是其他人使用的不多；三是此屬性功能效果有不少替代方案。

我們使用overflow可以實現塊內容的剪裁，而圖片剪裁我們卻很少用到。我們往往是將圖片進行等比例縮小。所以很少用到clip剪裁。但是等比例縮小問題來了，他很可能不能將圖片縮小為我們想要的尺寸。那么用clip屬性就省事不少。

相關CSS代碼如下：

.hidden{

position:absolute;

clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

clip: rect(1px, 1px, 1px, 1px);

}

其中方向含義為rect(top right bottom left)，就順序上而言，top → right → bottom → left，在CSS中是統一相承的，就像是margin的四個值的順序，border-width等等的四個值順序——從頭頂上開始，順時針旋轉的說~~不過這里的四個值是不可以縮寫的。

其中top right bottom left表示各個位置的屬性值，就像是width:200px;中的200px，所以，我們會有類似下面的使用：rect(30px 200px 200px 20px)

那這里的top right bottom left究竟指什么的？我們該如何理解呢？

其實是這樣的，top right bottom left分別指最終剪裁可見區域的上邊，右邊，下邊與左邊。而所有的數值都表示位置，且是相對于原始元素的左上角而言的。于是rect(30px 200px 200px 20px)表示的含義就是：最終剪裁的矩形的上邊距離原始元素的上邊緣30像素；剪裁矩形的右邊緣距離原元素左邊緣的距離是200像素；剪裁矩形的下邊緣距離原元素頂部的距離為200像素；剪裁矩形的左邊緣距離原元素左邊緣的距離時20像素。如下圖(300像素*300像素)所示：

這樣就不難理解了。但是在實際使用過程中可能與我們想向中的不符。那么就需要不斷的改變其四個值去進行嘗試。其實我在使用margin和padding屬性的時候就經常改變四個值進行微調。

當然，這個屬性比較糟心的前提是，圖片需要在絕對定位之下才能使用，且使用后可能會改變圖片位置。這時候就需要用left right margin-left:-xx?margin-right:-xx來調節位置了。當然也可以設置其父元素為絕對定位。而且父元素使用clip對子元素同樣有效。如下Html：

我們可以這樣寫css：

#123{

position:absolute;

clip: rect(1px 1px 1px 1px);

}

好了，此文到此結束，大家不妨試試~

總結

以上是生活随笔為你收集整理的css 剪辑图片_CSS clip:rect 矩形剪裁功能，截取图片某一块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。