詳解css中用clip剪切圖片的原理和方法
系統(tǒng)
2683 0
clip剪切圖片示意圖
假設(shè)原圖片的寬度高度500 × 375 （px）
<html>
<head>
<style type="text/css">
<!--
img {
position:absolute;
clip:rect(20px 400px 210px 200px);
}
-->
</style>
</head>
<body>
<img src="http://photo7.yupoo.com/20070428/081241_1280937036.jpg" width="500" height="375" />
</body></html>
<!--clip用法說(shuō)明：
clip 剪切的原理：實(shí)際上就是定位"剪切線(xiàn)"的位置，然后從"剪切線(xiàn)"處剪開(kāi)，保留剪切線(xiàn)封閉的邊框內(nèi)的圖片，剩下來(lái)的就是處理后的圖片。圖片不會(huì)發(fā)生縮小和放 大，只是4個(gè)邊緣被不同程度的剪掉。（"剪切線(xiàn)"是形象的說(shuō)法，相當(dāng)于平時(shí)剪紙時(shí)定位的"虛線(xiàn)",這個(gè)虛線(xiàn)就是要用剪刀剪斷的地方。"剪切線(xiàn)"就相當(dāng)于這 里的要剪的"虛線(xiàn)"。把四周的虛線(xiàn)剪開(kāi)，就得到一個(gè)新的圖片，而這種虛線(xiàn)至少有一條。最多有4條，分別叫上虛線(xiàn)、右虛線(xiàn)、下虛線(xiàn)、左虛線(xiàn)。上虛線(xiàn)距離圖片 上邊緣為20px；下虛線(xiàn)距離圖片上邊緣為210px；右虛線(xiàn)距離圖片左邊緣為400px；左虛線(xiàn)距離圖片左邊緣為200px。然后從虛線(xiàn)處剪開(kāi)，虛線(xiàn)內(nèi) 的圖片，即為顯示的圖片。該圖片被clip剪切后不會(huì)產(chǎn)生左右移動(dòng)，上下也不會(huì)移動(dòng)。圖片也不會(huì)縮放。
clip:rect(上邊 右邊 下邊 左邊)
clip:rect(20px 400px 210px 200px);
clip:rect(0 400px 210px 0);定位右虛線(xiàn)和下虛線(xiàn)剪切圖片的右邊和下邊
clip:rect(100px auto auto 200px);剪圖片的上邊和左邊
clip:rect(0 400px auto 0);只剪圖片的右邊,可以用來(lái)控制圖片的寬度，而不縮放圖片，特別是大圖
測(cè)試表明：火狐和谷歌瀏覽器也支持這個(gè)clip屬性和值
■要結(jié)合position:absolute;使用，用來(lái)修飾img元素
詳解css中用clip剪切圖片的原理和方法
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元