首頁 > web前端 > css教學 > css clip屬性怎麼用

css clip屬性怎麼用

silencement
發布: 2019-05-27 17:01:51
原創
3776 人瀏覽過

css clip屬性怎麼用

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屬性怎麼用

頁面顯示圖片

css clip屬性怎麼用

#

以上是css clip屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板