CSS clip:rect矩形剪裁功能及一些應用介紹

CSS中有一個屬性叫作clip，爲修剪，剪裁之意。配合其屬性關鍵字rect能夠實現元素的矩形裁剪效果。此屬性安安穩穩地存在於CSS2.1中，且使用上基本上沒有相似於max-height/display:table-cell等瀏覽器的兼容性問題。可是，貌似你們不多使用此屬性。我總結了三點緣由：首先是理解上有些門檻；二是其餘人使用的很少；三是此屬性功能效果有很多替代方案。這種狀態有些相似於普通的計算機使用者使用XP系統用得很不錯，而後讓他去使用Mac系統，可能就會由於使用不習慣、其餘人不怎麼用、功能XP系統基本都有且支持更普遍而又回到XP系統上。實際上，哪一種操做系統更好呢？我想不言而喻。

因此，咱們使用overflow實現生硬的剪裁與原生的clip剪裁就有些相似於使用XP系統與Mac般。

老實講，我本身使用的也很少，僅在兩年前在實際項目中解決一些特殊的問題學習並使用了該屬性。上個月的「 CSS 相對/絕對(relative/absolute)定位系列（三）」一文中的可用性隱藏部分曾出現了該屬性的應用，其做用就是頁面元素的可用性隱藏，相關CSS代碼以下：

.hidden{

position:absolute;

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

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

}

根據我本身的測試，貌似上面的第三行CSS是多餘的。可是，這裏出現是有其理由的，可是本身想不出了個原因，還望他人指點迷津。

「美特斯邦威，不走尋常路」，正由於彷佛你們都忽略了clip屬性，因此我決定稍稍挖掘下clip的屬性，讓你們開始關注與熟悉此屬性。順帶一句，這不是號召關心中華田園犬這種噱頭成分頗多的東西，而是實在在的能夠在實際項目中大放光彩的東東。

2、clip:rect屬性親密接觸

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

其中，聽說繼承inheritIE瀏覽器是不支持的，因此該屬性就是個醬油帝；而後"auto"就是不剪裁之意，除了重置rect的做用外，其也是個醬油副帝；因此真正上得了檯面張臉的就是rect(top right bottom left)，因此，咱們下面只討論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像素。

上面的表述又長有囉嗦又難以理解，你能夠這樣想象：飢餓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的元素上。

3、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頁面中的旋轉能夠直接當空氣，移動，拖動示意區域，就會在右側看到對應的剪裁預覽效果：

此例旨在展現clip:rect的潛力，故原理與使用略，您有興趣可參考上面提到的 文章，以及demo頁面相關源代碼。

4、清明節前的嘮叨

清明時節雨紛紛，路上行人慾斷魂，看着天氣像是要下雨的樣子。今晚回鄉，祭拜先祖。由於鄉下沒有安裝寬帶，因此今天直接就在上班時間折騰這篇文章了，故結尾處可能略顯倉促。另外，資質有限，clip:rect的研究也不深，因此文中也不免有表述不許確的地方，歡迎指正，不甚感謝。

 

本文的幾個clip:rect的應用實例純屬拋磚引玉，因爲其自己功能的特殊性，clip屬性必定還有其餘更加精妙的應用，這就要看你的智慧了。