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

2016-12-14 10:43

4715

最近我在制作一款主題的時(shí)候，在自適應(yīng)css設(shè)計(jì)中，為了調(diào)整圖片大小，又不愿意改變圖片比例的情況下，用到了CSS剪裁功能。

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

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

相關(guān)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中是統(tǒng)一相承的，就像是margin的四個(gè)值的順序，border-width等等的四個(gè)值順序——從頭頂上開始，順時(shí)針旋轉(zhuǎn)的說(shuō)~~不過這里的四個(gè)值是不可以縮寫的。

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

那這里的top right bottom left究竟指什么的？我們?cè)撊绾卫斫饽?#xff1f;

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

這樣就不難理解了。但是在實(shí)際使用過程中可能與我們想向中的不符。那么就需要不斷的改變其四個(gè)值去進(jìn)行嘗試。其實(shí)我在使用margin和padding屬性的時(shí)候就經(jīng)常改變四個(gè)值進(jìn)行微調(diào)。

當(dāng)然，這個(gè)屬性比較糟心的前提是，圖片需要在絕對(duì)定位之下才能使用，且使用后可能會(huì)改變圖片位置。這時(shí)候就需要用left right margin-left:-xx?margin-right:-xx來(lái)調(diào)節(jié)位置了。當(dāng)然也可以設(shè)置其父元素為絕對(duì)定位。而且父元素使用clip對(duì)子元素同樣有效。如下Html：

我們可以這樣寫css：

#123{

position:absolute;

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

}

好了，此文到此結(jié)束，大家不妨試試~

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。