css中使用clip屬性的案例

發(fā)布時間：2020-09-24 10:58:06 來源：億速云閱讀：240 作者：小新欄目：web開發(fā)

這篇文章主要介紹了css中使用clip屬性的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css clip 屬性用來設(shè)置元素的形狀。用來剪裁絕對定位元素。當一幅圖像的尺寸大于包含它的元素時，"clip" 屬性允許規(guī)定一個元素的可見尺寸，這樣此元素就會被修剪并顯示在這個元素中。

使用css clip屬性需要注意以下三點：

1.clip屬性只能用于絕對定位元素，position:absolute或fixed。

2.clip屬性有三種取值：auto 默認的;inherit繼承父級的;一個定義好的形狀，但現(xiàn)在只能是方形的 rect(),clip: { shape | auto | inherit }

3.shape rect(<top>, <right>, <bottom>, <left>)中的四個元素不可省略。

實例

<!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"/>
    </body>
</html>

原圖和頁面顯示圖片如下：

原圖

css中使用clip屬性的案例

頁面顯示圖

css中使用clip屬性的案例

感謝你能夠認真閱讀完這篇文章，希望小編分享css中使用clip屬性的案例內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!

向AI問一下細節(jié)

css中使用clip屬性的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽