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

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)剪裁
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
應(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,如果是橫向平鋪的,只能將所有橫向平鋪的圖合并成一張大圖,只能豎直排列,不能水平排列;如果是縱向平鋪的,我們只能將所有縱向平鋪的圖合并成一張大圖,只能水平排列,不能豎直排列。
css sprite允許將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中,然后利用background-position來顯示應(yīng)該顯示的區(qū)域。
而如果使用clip也可以實(shí)現(xiàn)同樣的效果。
- 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://7xpdkf.com1.z0.glb.clouddn.com/sofa_sprite.png" alt="測(cè)試圖片">
- </div>
3.歌詞演示效果
利用clip和background-clip實(shí)現(xiàn)歌詞演示效果,實(shí)際上通過改變寬度也可以實(shí)現(xiàn),主要用于拓展思路。
- @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">我曾經(jīng)跨過山和大海,也穿過人山人海</div>
- <div class="con">我曾經(jīng)跨過山和大海,也穿過人山人海</div>
相關(guān)文章
- clip-path能根據(jù)設(shè)定的大小將頁面的元素劃分出所要顯示的區(qū)域,或者說相當(dāng)于遮罩而不是真正地裁去某個(gè)部分,這里我們就來看一下CSS中的clip-path區(qū)域裁剪屬性使用教程2016-06-28
- 下面小編就為大家?guī)硪黄獪\談css中的clip裁剪用法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-19