建站
咨詢
售后
建站咨詢
新聞中心
本文和大家重點討論一下clip屬性的應(yīng)用，有一點需要記住，clip屬性必須和定位屬性postion一起使用才能生效，而且clip裁切的計算坐標(biāo)都是以左上角即(0,0)點開始計算。
在思明等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站制作,思明網(wǎng)站建設(shè)費用合理。
CSS基礎(chǔ)：詳細講解clip屬性的應(yīng)用
clip屬性是一個比較有用的屬性，但往往在實際應(yīng)用中，并不多見，本文中介紹了應(yīng)用clip屬性需要注意的幾點。
一、clip屬性必須和定位屬性postion一起使用才能生效。
二、clip裁切的計算坐標(biāo)都是以左上角即(0,0)點開始計算，這點不像padding和margin，它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。
clip屬性基礎(chǔ)語法：
◆clip屬性說明：
檢索或設(shè)置對象的可視區(qū)域。可視區(qū)域外的部分是透明的。
此屬性定義了絕對(absolute)定位對象可視區(qū)域的尺寸。必須將position屬性的值設(shè)為absolute，此屬性方可使用。
自IE5開始，此屬性在MAC平臺上可用。對應(yīng)的腳本特性為clip。CSS中的clip屬性除了可以制作彩色文字外，還可以有效地裁切其他網(wǎng)頁中的元素。
clip屬性設(shè)置元素的形狀。這個屬性用于定義一個剪裁矩形。在這個矩形內(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中的上右下左四個方向填入的應(yīng)是數(shù)值，表示裁切的位置。
下面我舉一個對圖片進行裁切的簡單例子。
首先準(zhǔn)備一張圖片，它的尺寸是159px*99像素，利用clip屬性將圖片進行裁切，只讓圖中的大紅點顯示出來。
我先制作一個放置圖片的div外框，它的CSS定義如下：
這個div的定位屬性設(shè)置為相對定位是為了讓圖片以它為定位標(biāo)準(zhǔn)，將背景定義為#FFF985是為了讓顯示效果更明顯。
然后定義圖片的裁切屬性，CSS定義如下：
這里的絕對定位是相對于id為imgClip的div而言的，clip中的數(shù)值按照上右下左的順序排列的。
html代碼：
網(wǎng)站標(biāo)題：CSS基礎(chǔ)：clip屬性用法剖析
文章路徑：http://www.fisionsoft.com.cn/article/cdeiedg.html
