バックグラウンドリピートのプロパティは、背景画像が繰り返されるか(タイル張り)かどうかを制御し、それが繰り返される場合、プロパティは、指定された軸(x、y、またはその両方)に沿って、画像を繰り返すことを定義します。
デフォルトでは、垂直軸と水平軸の両方に沿って背景画像が繰り返され、両方向に繰り返されます。バックグラウンドリピートプロパティを使用して、画像を繰り返す必要がある軸を指定します。背景画像が繰り返されると、最初に背景ポジションプロパティに従って配置され、次にそのポイントから両方向に繰り返され始めます。たとえば、中央の中心(要素の中心)の背景位置に配置され、繰り返しの背景回復値を持つ背景画像は、x軸とy軸に沿って両方向に繰り返されます。
要素の背景は、その要素の幅と高さで覆われた領域です(これらの寸法が明示的に設定されているか、コンテンツが指示するかどうか)。また、パディングと境界で覆われたエリアも含まれています。要素に適用される背景色(または背景イメージ)は、その要素の前景コンテンツの下に表示され、要素のパディングと境界特性で覆われた領域が表示されます。このカバレッジ領域は、要素が透明な(または点線または破線)境界線があり、背景が境界の下(またはドットの間)の下で見られる場合が明らかです。 6までのインターネットエクスプローラーバージョンは、透明な境界線をサポートしないことに注意してください。背景イメージが透けて表示される場合は、問題の要素の一部の領域が表示されなければなりません。要素に固有の高さがない場合(そのコンテンツで定義されているか、その寸法によって定義されているかのどちらか)、背景は表示されません。要素がクリアされていない浮上した子供のみが含まれている場合、クリアに見えます - 背景は表示されません。要素の高さはゼロになるためです。
インライン要素の背景画像のタイルと位置は、CSS2.1仕様では定義されていませんが、将来のバージョンでは対処される可能性があります。例
このスタイルのルールは、
x軸に沿って繰り返すID "の例"を持つ要素に割り当てられた背景イメージを引き起こします:
繰り返し
#example{ background-repeat: repeat-x; }
値Repeat-Xは、要素の背景がその軸に沿って完全に覆われるまで、x 軸(つまり、左と右の水平軸)に沿って背景画像が繰り返されることを保証します。
y 軸(つまり、双方向の垂直軸(双方)に沿ってのみ繰り返されることを保証します。
繰り返しバックグラウンドポジションが指定されていない場合、 画像は、要素のデフォルトの左トップ位置(0,0)に配置されます。
CSSバックグラウンドリピートプロパティの「Repeat-X」と「Repeat-Y」の違いは何ですか?
CSSバックグラウンドリピートプロパティの「スペース」値は、背景画像を両方向にタイル張りにするために使用されます。画像は均等に間隔を空けており、最初と最後の画像は要素の端に触れています。利用可能なスペースでもう1つの画像に十分でない場合、画像は適合するようにサイズ変更されます。これは、背景画像の各繰り返しの間に一貫した空間を維持する場合に役立ちます。画像は、要素内で何度も繰り返すことができるようにサイズ変更されています。これは、背景画像全体がクリッピングなしで表示されることを保証する場合に役立ちます。これは、要素の背景画像の繰り返し値がその親要素の繰り返し値と同じであることを意味します。
CSSバックグラウンドリピートプロパティの「初期」値は、プロパティをデフォルト値に設定するために使用されます。これは、背景画像が水平および垂直の両方で繰り返されることを意味します。これは、バックグラウンドリピートプロパティのデフォルトの動作です。
背景画像の繰り返しを一方向のみで制御できますか? 「Repeat-X」値を使用して、画像を水平方向に繰り返すか、「リピート」値を垂直に繰り返すことができます。これは、背景画像を使用して水平または垂直パターンを作成する場合に役立ちます。
以上がバックグラウンドリピート(CSSプロパティ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。