詳解css中用clip剪切圖片的原理和方法
系統
3278 0
clip剪切圖片示意圖
假設原圖片的寬度高度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用法說明：
clip 剪切的原理：實際上就是定位"剪切線"的位置，然后從"剪切線"處剪開，保留剪切線封閉的邊框內的圖片，剩下來的就是處理后的圖片。圖片不會發生縮小和放 大，只是4個邊緣被不同程度的剪掉。（"剪切線"是形象的說法，相當于平時剪紙時定位的"虛線",這個虛線就是要用剪刀剪斷的地方。"剪切線"就相當于這 里的要剪的"虛線"。把四周的虛線剪開，就得到一個新的圖片，而這種虛線至少有一條。最多有4條，分別叫上虛線、右虛線、下虛線、左虛線。上虛線距離圖片 上邊緣為20px；下虛線距離圖片上邊緣為210px；右虛線距離圖片左邊緣為400px；左虛線距離圖片左邊緣為200px。然后從虛線處剪開，虛線內 的圖片，即為顯示的圖片。該圖片被clip剪切后不會產生左右移動，上下也不會移動。圖片也不會縮放。
clip:rect(上邊 右邊 下邊 左邊)
clip:rect(20px 400px 210px 200px);
clip:rect(0 400px 210px 0);定位右虛線和下虛線剪切圖片的右邊和下邊
clip:rect(100px auto auto 200px);剪圖片的上邊和左邊
clip:rect(0 400px auto 0);只剪圖片的右邊,可以用來控制圖片的寬度，而不縮放圖片，特別是大圖
測試表明：火狐和谷歌瀏覽器也支持這個clip屬性和值
■要結合position:absolute;使用，用來修飾img元素
詳解css中用clip剪切圖片的原理和方法
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元