CSS クリップのプロパティの簡単な分析

クリップ属性は比較的便利な属性ですが、実際のアプリケーションではまれなことが多く、52CSS.com で紹介されているものはほとんどありません。クリップ属性を適用する際の注意点は次の 2 つです。
1. クリップ属性を有効にするには、位置決め属性 postion と一緒に使用する必要があります。
2. クリップクロッピングの計算座標は、図 3 に示すように、左上隅、つまり (0,0) 点から計算されます。これは、パディングと右マージンと下マージンの両方とは異なります。それらは右端から下から数えます。

クリップ属性の基本構文:


クリップ属性の説明:
オブジェクトの表示領域を取得または設定します。表示領域以外の部分は透明になります。
このプロパティは、絶対に配置されたオブジェクトの表示領域のサイズを定義します。このプロパティを使用するには、position プロパティの値を絶対値に設定する必要があります。
このプロパティは、IE5 以降の MAC プラットフォームで使用できます。
対応するスクリプト プロパティは Clip です。
色付きのテキストを作成するだけでなく、CSS のクリップ属性を使用すると、他の Web ページの要素を効果的にトリミングすることもできます。

クリップ属性は要素の形状を設定します。このプロパティは、クリッピング四角形を定義するために使用されます。この四角形内のコンテンツのみが表示され、このクリッピング領域の外側のコンテンツには overflow:hidden と同じ効果があります。クリッピング領域は、要素のコンテンツ領域よりも大きい場合も小さい場合もあります。
クリップ属性値: auto | 上、右、下、左
Auto はトリミングなしを意味します。四角形の 4 つの方向には、トリミングの位置を示す数値が入力されます。
以下に、画像をトリミングする簡単な例を示します。
まず、図 1 に示すように、サイズが 159px*99 ピクセルの画像を用意します。画像内の大きな赤い点だけが表示されるように、clip 属性を使用して画像をトリミングする予定です。
まず画像を配置するための div フレームを作成します。その CSS は次のように定義されます。


この div の配置属性は、画像の配置基準として使用するために相対配置に設定されており、表示効果をより明確にするために背景が #FFF985 として定義されています。
次に、画像のトリミング プロパティを定義します。CSS 定義は次のとおりです。


ここでの絶対位置はimgClipのidを持つdivに対して相対的なもので、クリップ内の値は上、右、下、左の順に配置されます。
htmlコード: