CSSクリップ属性の使い方

silencement
リリース: 2019-05-27 17:01:51
オリジナル
3747 人が閲覧しました

CSSクリップ属性の使い方

css クリップ属性 は、要素の形状を設定するために使用されます。絶対的に配置された要素をクリップするために使用されます。画像のサイズがそれを含む要素よりも大きい場合、「clip」属性を使用して要素の表示サイズを指定すると、画像が切り取られてこの要素内に表示されます。

CSS のクリップ属性を使用するときは、次の 3 つの点に注意する必要があります:

1. クリップ属性は、絶対位置の要素 (位置: 絶対または固定) にのみ使用できます。

2. クリップ属性には 3 つの値があります: 自動デフォルト、親からの継承、定義されたシェイプですが、現在は正方形のect()のみにすることができます。クリップ: { シェイプ | 自動 | 継承 }

3.shape rect(, , , ) 内の 4 つの要素は省略できません。

#例

<!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クリップ属性の使い方" >
    </body>
</html>
ログイン後にコピー

元の画像とページ表示画像は次のとおりです。


元の画像

CSSクリップ属性の使い方

ページ表示イメージ

CSSクリップ属性の使い方

以上がCSSクリップ属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート