DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 深入理解CSS裁剪clip
深入理解CSS裁剪clip
編輯:CSS特效代碼     
×
目錄
[1]定義 [2]RECT [3]應用

前面的話

  CSS裁剪clip這個屬性平時用的不多,但其實它並不是CSS3的新屬性,很早就開始出現了。本文將介紹關於clip屬性的相關知識

 

定義

  一個絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區域的形狀,但並不改變元素本身的寬高屬性

clip

  值: rect(top,right,bottom,left) | auto | inherit

  初始值: auto

  應用於: 絕對定位或相對定位元素

  繼承性: 無

  [注意]默認值auto表示元素的內容不應剪裁

rect

  clip:rect(top,right,bottom,left)中的值不是邊偏移,而是距元素左上角的距離。具體來說,就是top和bottom是表示距離元素上邊界的距離;left和right是距離元素元素左邊界的距離。這裡元素的邊界指元素邊框外側。

  rect(...)的語法與CSS的其他語法相比不太一樣。原因是它基於早期的定位草案,而該草案使用了左上偏移機制。在CSS2之前,實現這個語法的IE已經成為完備推薦,於是標准從邊偏移修改成適用這個實現。但是,這意味著如果高度和寬度沒有明確定義,將無法設置一致的剪裁區域。

  [注意]IE7-浏覽器不支持rect(top,right,bottom,left),支持的寫法是rect(top right bottom left);而其他浏覽器兩種寫法都支持

  clip:rect(...)只允許長度值和auto,不允許有百分數。如果設置為auto,則相當於將剪裁邊界設置為適當的內容邊界。對於top或left設置auto,相當於值為0;對於right或bottom設置auto,相當於值為水平方向的寬度和或垂直方向的高度和

  [注意]該元素水平方向或垂直方向的clip區域的邊界是外框外側,不包括outline

應用

【1】隱藏效果

  當clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right時,可實現元素的隱藏效果,效果類似於visibility:hidden;

【2】雪碧圖定位

  css sprite是一種網頁圖片應用處理方式,它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中,然後利用background-position來顯示應該顯示的區域。關於CSS Sprite的詳細信息移步至此。而如果使用clip也可以實現同樣的效果。

div{
    height:128px;
    overflow: hidden;
}
img{
    position:absolute;
    background-color: rgba(0,255,0,0.5);
    clip:rect(0,auto,128px,0);
}
img:hover{
    margin-top: -128px;
    clip:rect(128px,auto,auto,0);
}
<div>
    <img src="http://hovertree.com/hvtimg/bjafjc/lsiu1fil.png" alt="測試圖片">    
</div>
請把光標移到圖片上

【3】歌詞演示效果

  利用clip和background-clip實現歌詞演示效果,實際上通過改變寬度也可以實現,主要用於拓展思路。

@keyframes loop{
    0%{
        clip:rect(0,0px,100px,0);
    }
    100%{
        clip:rect(0,520px,100px,0);
    }
}
.show,.con{
    width: 520px;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    position:absolute;
    background-color: lightgreen;

}
.con{
    animation: loop 6s linear infinite;
    -webkit-background-clip: text;
    color: red;
}    
<div class="show">想問候不知從何問起,何問起很愛很愛你</div>
<div class="con">>想問候不知從何問起,何問起很愛很愛你</div>
想問候不知從何問起,何問起很愛很愛你 想問候不知從何問起,何問起很愛很愛你





XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved