欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS裁剪屬性clip使用的實例教程

cnblogs   發(fā)布時間:2016-04-01 11:48:34   作者:小火柴的藍色理想   我要評論
這篇文章主要介紹了CSS裁剪屬性clip使用的實例教程,文中對于其輔助雪碧圖定位等方面的運用作了詳細的說明,需要的朋友可以參考下

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

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

clip

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

  初始值: auto

  應用于: 絕對定位或固定定位元素

  繼承性: 無

  [注意]默認值auto表示元素的內(nèi)容不應剪裁
201641115122867.png (225×154)

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

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

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

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

  [注意]該元素水平方向或垂直方向的clip區(qū)域的邊界是外框外側(cè),不包括outline
201641115154651.png (288×111)

應用
1.隱藏效果

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

2.雪碧圖定位
css sprite

定義:css sprite是一種網(wǎng)頁圖片應用處理方式,它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中

優(yōu)點:
  [1]減少http請求次數(shù)
  [2]減少圖片大小,提升網(wǎng)頁加載速度 (多張圖片加載速度小于拼合成的圖片的加載速度)

缺點:
  [1]提高開發(fā)成本
  [2]提高維護成本

它能合并的只能是用于背景的圖片:
  [1]對于<img src=""/>設置的圖片,是不能合并到大圖的,如果合并這些圖片會影響頁面可讀性,語義化降低且可調(diào)整的范圍小。
  [2]對于橫向和縱向都平鋪的圖片,也不能使用css cprite,如果是橫向平鋪的,只能將所有橫向平鋪的圖合并成一張大圖,只能豎直排列,不能水平排列;如果是縱向平鋪的,我們只能將所有縱向平鋪的圖合并成一張大圖,只能水平排列,不能豎直排列。
201641115257568.jpg (829×382)

css sprite允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中,然后利用background-position來顯示應該顯示的區(qū)域。
而如果使用clip也可以實現(xiàn)同樣的效果。

CSS Code復制內(nèi)容到剪貼板
  1. div{   
  2.     height:128px;   
  3.     overflowhidden;   
  4. }   
  5. img{   
  6.     position:absolute;   
  7.     background-color: rgba(0,255,0,0.5);   
  8.     clip:rect(0,auto,128px,0);   
  9. }   
  10. img:hover{   
  11.     margin-top: -128px;   
  12.     clip:rect(128px,auto,auto,0);   
  13. }   
  14.   
  15. <div>   
  16.     <img src="http://7xpdkf.com1.z0.glb.clouddn.com/sofa_sprite.png" alt="測試圖片">       
  17. </div>  

201641115322299.png (128×256)

3.歌詞演示效果

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

CSS Code復制內(nèi)容到剪貼板
  1. @keyframes loop{   
  2.     0%{   
  3.         clip:rect(0,0px,100px,0);   
  4.     }   
  5.     100%{   
  6.         clip:rect(0,520px,100px,0);   
  7.     }   
  8. }   
  9. .show,.con{   
  10.     width520px;   
  11.     height100px;   
  12.     line-height100px;   
  13.     font-size30px;   
  14.     position:absolute;   
  15.     background-color: lightgreen;   
  16.   
  17. }   
  18. .con{   
  19.     animation: loop 6s linear infinite;   
  20.     -webkit-background-clip: text;   
  21.     colorred;   
  22. }       
  23.   
  24. <div class="show">我曾經(jīng)跨過山和大海,也穿過人山人海</div>   
  25. <div class="con">我曾經(jīng)跨過山和大海,也穿過人山人海</div>  

相關文章

  • CSS中的clip-path區(qū)域裁剪屬性使用教程

    clip-path能根據(jù)設定的大小將頁面的元素劃分出所要顯示的區(qū)域,或者說相當于遮罩而不是真正地裁去某個部分,這里我們就來看一下CSS中的clip-path區(qū)域裁剪屬性使用教程
    2016-06-28
  • 淺談css中的clip裁剪用法

    下面小編就為大家?guī)硪黄獪\談css中的clip裁剪用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-19

最新評論