<delect id="spbmx"><del id="spbmx"><em id="spbmx"></em></del></delect>

<p id="spbmx"></p>
<p id="spbmx"></p><p id="spbmx"></p>
<var id="spbmx"></var><p id="spbmx"><xmp id="spbmx">

<p id="spbmx"><listing id="spbmx"></listing></p>
<button id="spbmx"><listing id="spbmx"></listing></button><delect id="spbmx"><em id="spbmx"></em></delect>

<delect id="spbmx"><legend id="spbmx"></legend></delect>

  • <p id="spbmx"></p><delect id="spbmx"><legend id="spbmx"></legend></delect>

    <p id="spbmx"></p><button id="spbmx"><xmp id="spbmx">
    <button id="spbmx"></button>

    <button id="spbmx"><listing id="spbmx"><del id="spbmx"></del></listing></button>

    【clip的什么意思】clip屬性注意事項與說明

    時間:2019-07-05 熱點推薦 點擊:

    【www.lovezihan.com--熱點推薦】

      clip屬性是一個比較有用的屬性,但往往在實際應用中,并不多見,而介紹的也很少。應用clip屬性需要注意的兩點:

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

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

      clip屬性基礎語法:

      clip : auto rect ( number number number number )

      取值:

      auto : 默認值。對象無剪切

      rect ( number number number number ) : 依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值,其中任一數值都可用 auto 替換,即此邊不剪切

      clip屬性說明:

      檢索或設置對象的可視區域。可視區域外的部分是透明的。

      此屬性定義了絕對(absolute)定位對象可視區域的尺寸。必須將 position 屬性的值設為 absolute ,此屬性方可使用。

      自IE5開始,此屬性在MAC平臺上可用。

      對應的腳本特性為 clip 。

      CSS中的clip屬性除了可以制作彩色文字外,還可以有效地裁切其他網頁中的元素。

      clip屬性設置元素的形狀。這個屬性用于定義一個剪裁矩形。在這個矩形內的內容才可見,出了這個剪裁區域的內容和 overflow:hidden 的效果相同。剪裁區域可能比元素的內容區大,也可能比內容區小。

      clip屬性值:auto rect (top, right, bottom, left)

      auto代表不裁切,rect中的上右下左四個方向填入的應是數值,表示裁切的位置。

      下面我舉一個對圖片進行裁切的簡單例子。

      首先準備一張圖片,如圖一中所示,它的尺寸是159px*99像素。我打算利用clip屬性將圖片進行裁切,只讓圖中的大紅點顯示出來。

      我先制作一個放置圖片的div外框,它的CSS定義如下:

      #imgClip {

      position:relative;

      width:159px;

      height:99px;

      background:#FFF985;

      margin:0 auto;

      }

      這個div的定位屬性設置為相對定位是為了讓圖片以它為定位標準,將背景定義為#FFF985是為了讓顯示效果更明顯。

      然后定義圖片的裁切屬性,CSS定義如下:

      #imgClip img {

      position:absolute;

      clip:rect(21px 68px 51px 38px);

      }

      這里的絕對定位是相對于id為imgClip的div而言的,clip中的數值按照上右下左的順序排列的。

      html代碼:

      <div id="imgClip">

      <img src="http://myarticle.enet.com.cn/images/2011/0504/1304490060130.jpg" width="159" height="99" />

      </div>

    熱門標簽: flipa clip
    《【clip的什么意思】clip屬性注意事項與說明.doc》
    將本文的Word文檔下載到電腦,方便收藏和打印
    推薦度:

    文檔為doc格式

    文章下載

    《【clip的什么意思】clip屬性注意事項與說明.doc》

    VIP請直接點擊按鈕下載本文的Word文檔下載到電腦,請使用最新版的WORD和WPS軟件打開,如發現文檔不全可以聯系客服申請處理。

    文檔下載
    VIP免費下載文檔
    成年av网站全部免费毛片