背景クリップと背景オリジンは、CSS3 で追加された新しい背景モジュール プロパティで、背景の位置を決定するために使用されます。
背景クリップは、背景に境界領域が含まれているかどうかを判断するために使用されます。また、background-origin は、背景位置計算の基準位置を決定するために使用されます。
構文は次のとおりです。
背景クリップ: [境界線のパディング] [, [境界線のパディング]]* |
背景クリップの場合:
パディング値の場合、背景はパディング エッジを無視し、境界線は透明になります。境界値の場合、背景には境界領域が含まれます。複数の背景画像画像がある場合、対応する背景クリップ値はカンマで区切られます。
バックグラウンド起点の場合:
パディング値の場合、位置はパディング エッジを基準とします (「0 0」はパディング エッジの左上隅、「100% 100%」は右下隅です)。境界値の場合は、相対的な境界エッジを意味します。境界値はコンテンツの端を基準にしています。背景クリップと同様に、複数の値はカンマで区切られます。背景クリップがパディング値、背景原点が境界値、背景位置が「左上」（デフォルトの初期値）の場合、背景画像の左上隅が切り取られます。
これら 2 つの属性は CSS3 からのみ表示されます。この属性が使用されない場合のバックグラウンド モジュールのデフォルトの動作はどうなりますか?
| デフォルトでは、background-clip は、background-clip:border のようなものになります。 デフォルトでは、background-origin は、background-origin:padding のような値になります。 |
ただし、IE は特殊なケースです (ひどいです)。
IE6 および IE7 では、一般要素 (ボタンなどを除く) の背景は次と同等です。
hasLayout 要素 (およびボタンなど) の背景は、background-clip:padding;と同等です。
この CSS3 プロパティのペアは Mozilla、Safari 3、Konqueror などのブラウザに実装されていますが、それらはすべてプライベート プロパティを通じて表現されます。
基本的な非 IE ブラウザのプライベート属性は通常 -xxx- で始まり、-o- はエンジンとして Presto を使用する Opera のプライベート、-icab- は iCab のプライベート、および -khtml- はエンジンとして KHTML を使用するブラウザです。 (Konqueror Safari など)、-moz- は Mozilla の Gecko エンジンに基づくブラウザ (Firefox、Mozilla など)、-webkit- は Webkit レンダリング エンジン (KHTML の派生物) に基づくブラウザ (Safari、Swift など) ）。
つまり、サポートされるプライベート属性は次のとおりです。
| -moz-背景-クリップ -webkit-background-clip -khtml-背景-クリップ -moz-背景-原点 -webkit-background-origin -khtml-背景-原点 |
以下に、background-origin 属性を使用した簡単な例を示します。その効果は次のとおりです。
HTMLコード:
CSSコード:
ボタン { border:3px double #95071b;/*デザイン内の白い線をシミュレートするには、3px の二重境界線を使用します*/ 背景色:#95071b; /*背景のトリミング方法とガイドラインを設定します*/ -moz-background-origin:パディング; /*上位互換性*/ 色:#fff; /*IE6 での高さの問題を修正*/ |
欠点: この効果は Opera では実現できません。もちろん、これは HTML コードに夢中になっている人のための単なる解決策です (background-clip 属性とbackground-origin 属性の学習と理解に限定されます)。もちろん、CSS をより簡潔にする他の方法を試すこともできます。さまざまな方法の利点と欠点を比較検討するのはあなた次第です。