Web ドキュメントの背景画像を繰り返すにはどのような方法がありますか?

Web ドキュメントの背景画像を繰り返す方法は次のとおりです: 1. 繰り返しなし、繰り返しなし、2. 背景画像は縦方向と横方向に繰り返す、繰り返し、3. 横方向に繰り返す、繰り返し-x; 4. 垂直方向と水平方向の繰り返し、repeat-y。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

背景画像の繰り返し方法には、「リピートなし」、「リピート」、「横リピート」、「縦横リピート」があります。

構文

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

最も一般的に使用されるものは上記のとおりです。他の 2 つの属性値を見てみましょう:

background-repeat: space;
background-repeat: round;

デフォルトでは、繰り返される画像はクリップされます。要素のサイズですが、(round を使用して) 拡大縮小したり、(space を使用して) 均等に分散したりすることができます。

round: 許容されるスペースのサイズが大きくなるにつれて、イメージを追加するのに十分なスペースができるまで、繰り返されるイメージは (ギャップなしで) 引き伸ばされます。次のイメージが追加されると、現在のイメージはすべて圧縮されます。スペースを作る。

スペース: 画像は可能な限り繰り返されますが、トリミングされません。最初と最後の画像は要素の対応する側面に固定され、空白は要素間で均等に配分されます。画像。トリミングせずに 1 つの画像のみを表示できる場合を除き、background-position プロパティは無視されます。トリミングが発生するのは、画像が大きすぎて画像全体を表示するのに十分なスペースがない場合のみです。

Double value 構文

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

書き方は通常と同じ、横 | 縦です。

推奨学習: css ビデオ チュートリアル

以上がWeb ドキュメントの背景画像を繰り返すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。