CSS教程:clip屬性完全解答

<p>
clip屬性是一個比較有用的屬性，但往往在實際應(yīng)用中，并不多見，而webjx.com介紹的也很少。應(yīng)用clip屬性需要注意的兩點：</p><p>

一、clip屬性必須和定位屬性postion一起使用才能生效。</p><p>

二、clip裁切的計算坐標(biāo)都是以左上角即（0,0）點開始計算，如圖三所示，這點不像padding和margin，它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。</p><p>

clip屬性基礎(chǔ)語法：</p><p>

clip : auto 　 rect ( number number number number )</p><p>
取值：</p><p>
auto :　 默認(rèn)值。對象無剪切</p><p>
rect ( number number number number ) :　 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計算的四個偏移數(shù)值，其中任一數(shù)值都可用 auto 替換，即此邊不剪切</p><p>

clip屬性說明：</p><p>

檢索或設(shè)置對象的可視區(qū)域。可視區(qū)域外的部分是透明的。</p><p>

此屬性定義了絕對(absolute)定位對象可視區(qū)域的尺寸。必須將 position 屬性的值設(shè)為 absolute ，此屬性方可使用。</p><p>

自IE5開始，此屬性在MAC平臺上可用。</p><p>

對應(yīng)的腳本特性為 clip 。</p><p>

CSS中的clip屬性除了可以制作彩色文字外，還可以有效地裁切其他網(wǎng)頁中的元素。</p><p>

clip屬性設(shè)置元素的形狀。這個屬性用于定義一個剪裁矩形。在這個矩形內(nèi)的內(nèi)容才可見，出了這個剪裁區(qū)域的內(nèi)容和 overflow:hidden 的效果相同。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。</p><p>

clip屬性值：auto 　 rect (top, right, bottom, left)</p><p>

auto代表不裁切，rect中的上右下左四個方向填入的應(yīng)是數(shù)值，表示裁切的位置。</p><p>

下面我舉一個對圖片進(jìn)行裁切的簡單例子。</p><p>

首先準(zhǔn)備一張圖片，如圖一中所示，它的尺寸是159px*99像素。我打算利用clip屬性將圖片進(jìn)行裁切，只讓圖中的大紅點顯示出來。</p><p>

我先制作一個放置圖片的div外框，它的CSS定義如下：</p><p>

#imgClip {</p><p>
position:relative;</p><p>
width:159px;</p><p>
height:99px;</p><p>
background:#FFF985;</p><p>
margin:0 auto;</p><p>
}</p><p>

這個div的定位屬性設(shè)置為相對定位是為了讓圖片以它為定位標(biāo)準(zhǔn)，將背景定義為#FFF985是為了讓顯示效果更明顯。</p><p>

然后定義圖片的裁切屬性，CSS定義如下：</p><p>

#imgClip img {</p><p>
position:absolute;</p><p>
clip:rect(21px 68px 51px 38px);</p><p>
}</p><p>

這里的絕對定位是相對于id為imgClip的div而言的，clip中的數(shù)值按照上右下左的順序排列的。</p><p>

html代碼：</p><p>

＜div id="imgClip"&gt;</p><p>
＜img src="http://www.tfsj360.com/images/2011/0504/1304490060130.jpg" width="159" height="99" /&gt;</p><p>
＜/div&gt;
</p>