CSS教程-clip屬性完全解答

2020-03-24 17:29:27

字體：大中小

供稿：網(wǎng)友

clip屬性是一個(gè)比較有用的屬性，但往往在實(shí)際應(yīng)用中，并不多見(jiàn)，而webjx.com介紹的也很少。應(yīng)用clip屬性需要注意的兩點(diǎn)：一、clip屬性必須和定位屬性postion一起使用才能生效。二、clip裁切的計(jì)算坐標(biāo)都是以左上角即（0,0）點(diǎn)開(kāi)始計(jì)算，如圖三所示，這點(diǎn)不像padding和margin，它們兩個(gè)的右邊距和下邊距是從最右邊和最下邊開(kāi)始計(jì)算的。 clip屬性基礎(chǔ)語(yǔ)法： clip : auto rect ( number number number number )
取值：
auto : 默認(rèn)值。對(duì)象無(wú)剪切
rect ( number number number number ) : 依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用 auto 替換，即此邊不剪切 clip屬性說(shuō)明：檢索或設(shè)置對(duì)象的可視區(qū)域。可視區(qū)域外的部分是透明的。此屬性定義了絕對(duì)(absolute)定位對(duì)象可視區(qū)域的尺寸。必須將 position 屬性的值設(shè)為 absolute ，此屬性方可使用。自IE5開(kāi)始，此屬性在MAC平臺(tái)上可用。對(duì)應(yīng)的腳本特性為 clip 。 CSS中的clip屬性除了可以制作彩色文字外，還可以有效地裁切其他網(wǎng)頁(yè)中的元素。 clip屬性設(shè)置元素的形狀。這個(gè)屬性用于定義一個(gè)剪裁矩形。在這個(gè)矩形內(nèi)的內(nèi)容才可見(jiàn)，出了這個(gè)剪裁區(qū)域的內(nèi)容和 overflow:hidden 的效果相同。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。 clip屬性值：auto rect (top, right, bottom, left) auto代表不裁切，rect中的上右下左四個(gè)方向填入的應(yīng)是數(shù)值，表示裁切的位置。下面我舉一個(gè)對(duì)圖片進(jìn)行裁切的簡(jiǎn)單例子。首先準(zhǔn)備一張圖片，如圖一中所示，它的尺寸是159px*99像素。我打算利用clip屬性將圖片進(jìn)行裁切，只讓圖中的大紅點(diǎn)顯示出來(lái)。我先制作一個(gè)放置圖片的div外框，它的CSS定義如下： #imgClip {
position:relative;
width:159px;
height:99px;
background:#FFF985;
margin:0 auto;
} 這個(gè)div的定位屬性設(shè)置為相對(duì)定位是為了讓圖片以它為定位標(biāo)準(zhǔn)，將背景定義為#FFF985是為了讓顯示效果更明顯。然后定義圖片的裁切屬性，CSS定義如下： #imgClip img {
position:absolute;
clip:rect(21px 68px 51px 38px);
} 這里的絕對(duì)定位是相對(duì)于id為imgClip的div而言的，clip中的數(shù)值按照上右下左的順序排列的。 html代碼：＜div id="imgClip"
＜img src="http://myarticle.enet.com.cn/images/2011/0504/1304490060130.jpg" width="159" height="99" /
＜/divhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS教程-徹底了解haslayout

下一篇：清理你的css