バックグラウンドリピート（CSSプロパティ）

説明

バックグラウンドリピートのプロパティは、背景画像が繰り返されるか（タイル張り）かどうかを制御し、それが繰り返される場合、プロパティは、指定された軸（x、y、またはその両方）に沿って、画像を繰り返すことを定義します。

デフォルトでは、垂直軸と水平軸の両方に沿って背景画像が繰り返され、両方向に繰り返されます。バックグラウンドリピートプロパティを使用して、画像を繰り返す必要がある軸を指定します。

背景画像が繰り返されると、最初に背景ポジションプロパティに従って配置され、次にそのポイントから両方向に繰り返され始めます。たとえば、中央の中心（要素の中心）の背景位置に配置され、繰り返しの背景回復値を持つ背景画像は、x軸とy軸に沿って両方向に繰り返されます。

要素の背景は、その要素の幅と高さで覆われた領域です（これらの寸法が明示的に設定されているか、コンテンツが指示するかどうか）。また、パディングと境界で覆われたエリアも含まれています。要素に適用される背景色（または背景イメージ）は、その要素の前景コンテンツの下に表示され、要素のパディングと境界特性で覆われた領域が表示されます。このカバレッジ領域は、要素が透明な（または点線または破線）境界線があり、背景が境界の下（またはドットの間）の下で見られる場合が明らかです。 6までのインターネットエクスプローラーバージョンは、透明な境界線をサポートしないことに注意してください。

背景イメージが透けて表示される場合は、問題の要素の一部の領域が表示されなければなりません。要素に固有の高さがない場合（そのコンテンツで定義されているか、その寸法によって定義されているかのどちらか）、背景は表示されません。要素がクリアされていない浮上した子供のみが含まれている場合、クリアに見えます - 背景は表示されません。要素の高さはゼロになるためです。

インライン要素の背景画像のタイルと位置は、CSS2.1仕様では定義されていませんが、将来のバージョンでは対処される可能性があります。

例

このスタイルのルールは、

x

軸に沿って繰り返すID "の例"を持つ要素に割り当てられた背景イメージを引き起こします：

値

繰り返し

#example{
  background-repeat: repeat-x;
}

値の繰り返しにより、バックグラウンドイメージが両方向（つまり、左と右、上下）の両方の方向（つまり、上下）が、要素の背景が完全に覆われるまで、両方の軸に沿って繰り返されることを保証します。

repeat-x

値Repeat-Xは、要素の背景がその軸に沿って完全に覆われるまで、x 軸（つまり、左と右の水平軸）に沿って背景画像が繰り返されることを保証します。

repeat-y

値リピート - yは、要素の背景がその軸に沿って完全に覆われるまで、

y 軸（つまり、双方向の垂直軸（双方）に沿ってのみ繰り返されることを保証します。

繰り返し

値のない繰り返しは、背景イメージがどの方向にも繰り返されず、画像の単一のインスタンスのみがバックグラウンドポジションによって指定された座標に配置されることを保証します。

バックグラウンドポジションが指定されていない場合、 画像は、要素のデフォルトの左トップ位置（0,0）に配置されます。

CSSのバックグラウンドリピートプロパティに関するよくある質問（FAQ）

CSSバックグラウンドリピートプロパティの「Repeat-X」と「Repeat-Y」の違いは何ですか？

CSSバックグラウンドリピートプロパティの「Repeat-X」と「Repeat-Y」値は、それぞれ水平および垂直に背景画像の繰り返しを制御するために使用されます。 「Repeat-X」を使用すると、背景画像は水平方向にのみ繰り返され、左から右に連続したパターンが作成されます。一方、「繰り返し」を使用すると、背景画像は垂直にのみ繰り返され、上から下まで連続的なパターンが作成されます。これらのプロパティは、バックグラウンド画像の繰り返しの方向を制御する場合に役立ちます。

CSSバックグラウンドリピートプロパティで複数の値を使用できますか？これは、複数の背景画像を使用している場合に特に便利です。各値をコンマで分離することにより、各背景画像の異なる繰り返し値を指定できます。最初の値は、最初の背景画像、2番目の画像の2番目の値などに対応します。

CSSバックグラウンドリピートプロパティでの「スペース」値はどのように機能しますか？

CSSバックグラウンドリピートプロパティの「スペース」値は、背景画像を両方向にタイル張りにするために使用されます。画像は均等に間隔を空けており、最初と最後の画像は要素の端に触れています。利用可能なスペースでもう1つの画像に十分でない場合、画像は適合するようにサイズ変更されます。これは、背景画像の各繰り返しの間に一貫した空間を維持する場合に役立ちます。画像は、要素内で何度も繰り返すことができるようにサイズ変更されています。これは、背景画像全体がクリッピングなしで表示されることを保証する場合に役立ちます。これは、要素の背景画像の繰り返し値がその親要素の繰り返し値と同じであることを意味します。

勾配を持つCSSバックグラウンドリピートプロパティを使用できますか？勾配で使用すると、バックグラウンドリピートプロパティは、指定された値に応じて勾配パターンを繰り返します。これは、繰り返しグラデーション効果を作成する場合に役立ちます。

CSSバックグラウンドリピートプロパティの「初期」値は、プロパティをデフォルト値に設定するために使用されます。これは、背景画像が水平および垂直の両方で繰り返されることを意味します。これは、バックグラウンドリピートプロパティのデフォルトの動作です。

CSSバックグラウンドリピートプロパティの値を指定しないとどうなりますか？これは、背景画像が水平方向と垂直の両方を繰り返すことを意味します。

背景画像の繰り返しを一方向のみで制御できますか？ 「Repeat-X」値を使用して、画像を水平方向に繰り返すか、「リピート」値を垂直に繰り返すことができます。これは、背景画像を使用して水平または垂直パターンを作成する場合に役立ちます。

以上がバックグラウンドリピート（CSSプロパティ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。