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

CSS裁剪屬性clip使用的實(shí)例教程

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

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

定義
  一個(gè)絕對(duì)定位或固定定位元素通過使用屬性clip可以改變剪裁區(qū)域的形狀,但并不改變?cè)乇旧淼膶捀邔傩?/p>

clip

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

  初始值: auto

  應(yīng)用于: 絕對(duì)定位或固定定位元素

  繼承性: 無

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

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

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

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

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

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

應(yīng)用
1.隱藏效果

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

2.雪碧圖定位
css sprite

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

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

缺點(diǎn):
  [1]提高開發(fā)成本
  [2]提高維護(hù)成本

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

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

CSS Code復(fù)制內(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="測(cè)試圖片">       
  17. </div>  

201641115322299.png (128×256)

3.歌詞演示效果

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

CSS Code復(fù)制內(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>  

相關(guān)文章

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

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

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

最新評(píng)論