css clip屬性怎麼用
- silencement原創
- 2019-05-27 17:01:513733瀏覽
css clip 屬性用來設定元素的形狀。用來剪裁絕對定位元素。當一幅圖像的尺寸大於包含它的元素時，"clip" 屬性允許規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示在這個元素中。
使用css clip屬性需要注意以下三點：
1.clip屬性只能用於絕對定位元素，position:absolute或fixed。
2.clip屬性有三種取值：auto 預設的;inherit繼承父級的;一個定義好的形狀，但現在只能是方形的rect(),clip: { shape | auto | inherit }
3.shape rect(
實例
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>clip</title>
<style type="text/css">
img {
position:absolute;
top:0;
left:10px;
clip: rect(52px, 280px, 290px, 95px);
}
</style>
</head>
<body>
<img src="00.jpg"/ alt="css clip屬性怎麼用" >
</body>
</html>原圖與頁面顯示圖片如下：
原圖
頁面顯示圖片
以上是css clip屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn