CSS中有一個屬性叫做clip，為修剪，剪裁之意。配合其屬性關鍵字rect可以實現元素的矩形裁剪效果。此屬性安安穩穩地存在于CSS2.1中，且使用上基本上沒有類似于max-height/display:table-cell等瀏覽器的兼容性問題。

根據Dreamweaver的自動提示，clip有如下可用屬性關鍵字：

就順序上而言，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像素。

上面的表述又長有啰嗦又難以理解，你可以這樣想象：饑餓N天的你突然面前出現了塊香噴噴的大大的300厘米*300厘米方形手抓餅，你拔出自己隨著攜帶的鋒利的日本刀，在距離頂部30厘米的地方咔嚓一刀，然后在距離左邊200厘米的地方咔嚓一刀，然后又以迅雷不及掩耳的速度在距離頂部200厘米和距離20厘米的地方咔嚓一刀。啪啪四刀留下的中間的那塊就是剪裁的內容了。所以，您可以將top right bottom left理解為在這些位置拿大刀咔咔修剪。

或者理解為在photoshop中為大背景建四個方向的參考線，如下圖（300像素*300像素）所示：

所謂“一圖勝千言，千言不敵一實例”。為了更加直觀的理解clip:rect后面四個值的含義，我專門做了個demo頁面。您可以狠狠地點擊這里：CSS clip:rect幾個值含義示意demo

在demo頁面中，我已經將4個值分離出來了，您任意修改其中的一個值，頁面上就會出現半透明的黑色層示意這部分內容是將會被剪裁掉的。例如，我們修改第一個值為30，如下圖：

失去焦點后就會看到圖片上出現了改值對應的剪裁作用區域：

類似的，我們修改各個框框的值為30 200 200 20，這時，圖片上的效果就是：

其中圖片中未被黑色半透明層覆蓋的區域就是最后的剪裁區域，您可以點擊下面的“剪裁”按鈕確認剪裁，結果就如下圖所示：

您也可以修改其他值做測試的。如果最后圖片全部被半透明層覆蓋，那么圖片最后會被剪裁到一點不剩。

最后有必要說明下：clip:rect矩形剪裁只能作用于position:absolute的元素上。

三、clip:rect矩形剪裁的一些應用介紹

1. 可用性隱藏
根據上面對top right bottom left的釋義，如果left >= right或者bottom <= top，則元素會被完全裁掉而不可見，即“隱藏”。通過這種方式隱藏的元素是可以被屏幕閱讀器等輔助設備識別的，從而提高了頁面的可用性。

例如：

clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/

或

clip: rect(10px 10px 10px 100px); /*left > right*/

或

clip: rect(100px 10px 10px 10px); /*bottom < top*/

等，正所謂小手抖一抖，剪裁有木有。//zxx:上面幾個值的效果您可以去part2部分所提供的demo頁面做測試滴。

2. img標簽下的CSS Sprite定位
為了節約圖片資源，我們經常會把小圖片整合到一張圖片上，稱為圖片合并技術，國外稱為CSS Sprite，含“精靈”之意。然后利用元素區域外background內容不可見的特性配合background-position定位實現圖片的精確顯示。

就連萬萬不能沒有的錢都不是萬能的，顯然，background-position下的CSS Sprite定位也不可能適用于各種情況。例如，有時我們希望Sprite圖片可以延遲滾動加載，或者是可以很輕松的右鍵圖片另存為...或者是某些特殊的background-position屬性不起作用的情況。

例如，眾所周知的，IE6瀏覽器不支持Alpha透明通道的png圖片（會有藍藍的背景），例如下圖所示：

我們可以使用filter濾鏡修復這一問題。然而，如果該png圖片以background-image的形式濾鏡透明化的話是不支持background-position定位的，也就是，我們不可能在IE6下使用background屬性實現png圖片的Sprite定位。此時，要想實現IE6下png圖片的Sprite定位只能在頁面上完成，使用img標簽，而非background-image屬性。

然后，img標簽下的圖片是不會像background-image一樣元素區域外部分自動隱藏，所以，我們需要借助某些手段對齊進行裁剪，此時clip:rect就派上用場了。

您可以狠狠地點擊這里：clip:rect下png圖片Sprite定位demo

demo頁面中的沙發png圖片完整顯示如下：

如果您手頭上的瀏覽器為IE6瀏覽器，則打開demo頁面會看到如下效果：

可以看到鼠標移上去后是有Sprite定位切換實現的hover效果：

可以看到為應用透明濾鏡的情況下，使用img標簽配合clip:rect輕松實現了Sprite圖片的hover切換效果。這在background屬性中也能實現，OK，現在點擊下面的“IE6 png透明按鈕”，應用AlphaImageLoader透明濾鏡，然后再鼠標經過，結果也是可以實現hover效果的，見下圖：

CSS代碼如下：

.clip_a{display:block; width:128px; height:128px;} .clip_a img{border:0; position:absolute; clip:rect(0 128px 128px 0);} .clip_a:hover{border:0;} .clip_a:hover img{margin-top:-128px; clip:rect(128px 128px 256px 0);}

由此可見，CSS Sprite的定位不僅僅可以使用background屬性，在頁面上使用img標簽，配合clip:rect剪裁也是可以輕松實現定位效果的。

3. 圖片剪裁的預覽效果
關于圖像剪裁，很早前我曾翻譯過一個名為Jcrop的jQuery插件，文章名為“jQuery照片圖像剪裁插件Jcrop中文翻譯詳解”，其中有個demo是含有剪裁預覽效果的，您可以輕輕地點擊這里訪問。

里面的剪裁預覽采用margin定位，有著較為復雜的計算。

實際上，像剪裁預覽效果顯示用剪裁屬性來實現是最合適的了。于是，自己利用自己先前寫的原生態的“圖片旋轉+剪裁js插件”中的zxx.crop_rotation.js寫了個圖片剪裁預覽效果demo。

您可以狠狠地點擊這里：clip:rect圖片剪裁效果demo

demo頁面中的旋轉可以直接當空氣，移動，拖動示意區域，就會在右側看到對應的剪裁預覽效果：

總結

以上是生活随笔為你收集整理的CSS clip:rect矩形剪裁功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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