新聞中心
本文向大家簡單介紹一下CSS clip屬性用法,應用clip屬性需要注意的兩點,***點就是clip屬性必須和定位屬性postion一起使用才能生效,另外一點就是clip裁切的計算坐標都是以左上角即(0,0)點開始計算,這點不像padding和margin,它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。

創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:網(wǎng)站設計制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的大竹網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!
CSS clip屬性用法解析
clip屬性是一個比較有用的屬性,但往往在實際應用中并不多見,這里向大家簡單描述一下,應用clip屬性需要注意的兩點:
一、clip屬性必須和定位屬性postion一起使用才能生效。
二、clip裁切的計算坐標都是以左上角即(0,0)點開始計算,這點不像padding和margin,它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。
clip屬性基礎語法:
示例代碼
- clip:auto|rect(numbernumbernumbernumber)
取值:
auto: 默認值。對象無剪切
rect(numbernumbernumbernumber): 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數(shù)值,其中任一數(shù)值都可用auto替換,即此邊不剪切
clip屬性說明:
檢索或設置對象的可視區(qū)域??梢晠^(qū)域外的部分是透明的。
此屬性定義了絕對(absolute)定位對象可視區(qū)域的尺寸。必須將position屬性的值設為absolute,此屬性方可使用。
自IE5開始,此屬性在MAC平臺上可用。
對應的腳本特性為clip。
CSS中的clip屬性除了可以制作彩色文字外,還可以有效地裁切其他網(wǎng)頁中的元素。
clip屬性設置元素的形狀。這個屬性用于定義一個剪裁矩形。在這個矩形內(nèi)的內(nèi)容才可見,出了這個剪裁區(qū)域的內(nèi)容和overflow:hidden的效果相同。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大,也可能比內(nèi)容區(qū)小。
clip屬性值:auto|rect(top,right,bottom,left)
auto代表不裁切,rect中的上右下左四個方向填入的應是數(shù)值,表示裁切的位置。
下面我舉一個對圖片進行裁切的簡單例子,首先準備一張圖片,它的尺寸是159px*99像素。我打算利用clip屬性將圖片進行裁切,只讓圖中的大紅點顯示出來。我先制作一個放置圖片的div外框,它的CSS定義如下:
示例代碼
- #imgClip{
- position:relative;
- width:159px;
- height:99px;
- background:#FFF985;
- margin:0auto;
- }
這個div的定位屬性設置為相對定位是為了讓圖片以它為定位標準,將背景定義為#FFF985是為了讓顯示效果更明顯。然后定義圖片的裁切屬性,CSS定義如下:
示例代碼
- #imgClipimg{
- position:absolute;
- clip:rect(21px68px51px38px);
- }
這里的絕對定位是相對于id為imgClip的div而言的,clip中的數(shù)值按照上右下左的順序排列的。
html代碼:
示例代碼
- width="159"height="99"/>
標題名稱:CSSclip屬性基本語法解析
分享網(wǎng)址:http://m.5511xx.com/article/codcjig.html


咨詢
建站咨詢
