css怎麼剪切圖片

WBOY原創: 2021-11-29 12:01:399564瀏覽

在css中，可以利用clip屬性剪切圖片，該屬性用於剪切絕對定位的元素，當該元素為絕對定位時就可以使用clip屬性進行剪切，語法為“position: absolute;clip:rect(top,right,bottom,left);)」。

css怎麼剪切圖片

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼剪下圖片

在css中可以利用clip 屬性剪裁圖片，clip 屬性剪裁絕對定位元素。也就是說，只有 position:absolute 的時候才是生效的。

範例如下：

<html>
<head>
<style type="text/css">
img {
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img  border="0" src="/i/eg_bookasp.gif"    style="max-width:90%"  style="max-width:90%" alt="css怎麼剪切圖片" ></p>
</body>
</html>

輸出結果：

css怎麼剪切圖片

img  {
position:absolute;
clip:rect(A,B,C,D);
 }

css怎麼剪切圖片

##當然具體寫的時候得寫出具體的像素值。

這個圖的作用是，說明這4個值到底指的是那個距離。

A：剪裁矩形距離父元素頂部的長度。

B：剪裁矩形距離父元素左邊的長度矩形寬度。

C：剪裁矩形距離父元素頂部的長度矩形高度。

D：剪裁矩形距離父元素左邊的長度。

（學習影片分享：

css影片教學）

以上是css怎麼剪切圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 position

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼將輸入框設為圓形下一篇：css怎麼將輸入框設為圓形

看更多