css怎麼剪切圖片

WBOY
發布: 2021-11-29 12:01:39
原創
9486 人瀏覽過

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

css怎麼剪切圖片

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

css怎麼剪下圖片

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

範例如下:

   

clip 属性剪切了一幅图像:

css怎麼剪切圖片

登入後複製

輸出結果:

css怎麼剪切圖片

#
img { position:absolute; clip:rect(A,B,C,D); }
登入後複製

css怎麼剪切圖片

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

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

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

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

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

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

(學習影片分享:

css影片教學

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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!