CSS クリッピング Clip_html/css_WEB-ITnose

× 目次 [1] 定義 [2] RECT [3] アプリケーション

前の単語

CSS のクリップ属性は一般的には使用されませんが、実は CSS3 の新しい属性ではなく登場しました非常に早い。 。この記事では、clip 属性に関する関連知識を紹介します

定義

絶対配置または固定配置の要素は、clip 属性を使用してクリッピング領域の形状を変更できますが、クリップ領域の幅と高さの属性は変更されません。要素自体

clip

値：rect(top,right,bottom,left) | auto | extend

初期値：auto

適用対象：絶対配置または相対配置の要素

継承：なし

[注意] ] デフォルト値 auto は要素の内容を表します クリップされるべきではありません

rect

clip:rect(top,right,bottom,left) の値は側面のオフセットではなく、左上からの距離です要素の角。具体的には、上と下は要素の上端からの距離を表し、左と右は要素の左端からの距離を表します。ここでの要素の境界とは、要素の境界の外側を指します。

rect(...) の構文は CSS の他の構文とは異なります。その理由は、左上のオフセット メカニズムを使用した以前の位置決めドラフトに基づいていたためです。 CSS2 が登場する前は、IE でこの構文を実装することが完全な推奨事項となっていたため、標準がエッジ オフセットからこの実装に適用されるように変更されました。ただし、高さと幅が明確に定義されていない場合、一貫したクリッピング領域を設定することはできません。

[注意] IE7ブラウザはrect(top,right,bottom,left)をサポートしていません。サポートされている書き込みメソッドはrect(top rightbottom left)ですが、他のブラウザは両方の書き込みメソッドをサポートしています

clip:rect(. . .) 長さの値と自動のみが許可され、パーセンテージは許可されません。 auto に設定されている場合、これはクリッピング境界を適切なコンテンツ境界に設定するのと同じです。上または左に auto を設定すると値 0 に相当し、右または下に auto を設定すると水平幅または垂直高さの値に相当します。枠線は輪郭を除いて外枠の外側にあります

適用

【1】効果を隠す

clip:rect(top,right,bottom,left) で、top>=bottom または left>=right のとき、できます。要素の非表示効果を実現します。その効果は、visibility:hidden;

に似ています。

【2】スプライトの配置

CSSスプライトは、Web画像アプリケーションの処理方法であり、ページに含まれるすべての散発的な画像を大きなサイズに含めることができます。画像を選択し、background-position を使用して表示すべき領域を表示します。 CSS スプライトに関する詳細情報はここに移動します。クリップを使用しても同じ効果が得られます。

div{    height:128px;    overflow: hidden;}img{    position:absolute;    background-color: rgba(0,255,0,0.5);    clip:rect(0,auto,128px,0);}img:hover{    margin-top: -128px;    clip:rect(128px,auto,auto,0);}

<div>    <img src="http://7xpdkf.com1.z0.glb.clouddn.com/sofa_sprite.png" alt="测试图片">    </div>

【3】歌詞デモンストレーションエフェクト

歌詞デモンストレーションエフェクトを実現するには、実際には幅を変更することでも実現できます。アイデア。 ❤️