CSSで背景を繰り返さないように設定する方法

Web デザインにおいて、背景画像は Web ページをより美しくするための非常に重要な要素です。ただし、背景画像が Web ページ上で複数回連続して表示される場合、Web ページは非常に繰り返しが多く単調に見える可能性があります。したがって、背景画像を使用する場合は、Web ページ上で背景画像が繰り返されないように注意する必要があります。

最も簡単な方法の 1 つは、CSS で background-repeat 属性を使用することです。このプロパティは、Web ページ内で背景画像をどのように繰り返すかを制御します。 background-repeat には、repeat (デフォルト)、repeat-x、repeat-y、および no-repeat の 4 つの使用可能な値があります。このうち、repeat は背景画像が水平方向と垂直方向の両方に繰り返されることを意味し、repeat-x は背景画像が垂直方向ではなく水平方向にのみ繰り返されることを意味し、repeat-y は背景画像が 2 方向にのみ繰り返されることを意味します。縦方向には表示されず、横方向には表示されません。no-repeat は背景画像が繰り返し表示されないことを意味します。

たとえば、背景画像が水平方向と垂直方向に繰り返されないようにするには、次のコードを使用できます:

background-repeat: no-repeat;

ただし、この方法には制限があります。 Web ページ全体を埋めるには、この方法では背景画像のごく一部だけが Web ページ上にレンダリングされ、Web ページ上に多くの空白スペースが残ります。この問題を解決するには、背景の位置決め属性、background-position を使用する必要があります。

background-position 属性は、Web ページ上の任意の場所に背景画像を配置するのに役立ちます。 2 つの値を受け入れます。最初の値は水平位置、2 番目の値は垂直位置です。たとえば、背景画像を左上隅に表示したい場合は、次のように記述できます。

background-position: left top;

背景画像を右下隅に表示したい場合は、次のように記述できます。これ:

background-position: right bottom;

背景画像を右下隅に表示したい場合 Web ページ全体を埋めるには、次のように記述できます:

background-position: center center;

一部の Web デザイナーは、より多くの背景画像の繰り返しを防ぐための複雑な方法、つまり CSS3 の複数の背景を使用します。複数の背景を使用すると、同じ要素に複数の背景画像を使用して、「非反復背景」のような効果を実現できます。

複数の背景を使用するには、css3 の background-image 属性が必要です。コンマで区切られた一連の背景画像を受け入れます。たとえば、次の背景は 3 つの画像で構成されています:

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");

ここでは、各背景画像が繰り返し表示されないように、各背景画像の位置を制御できます。たとえば、次のコードは、3 つの背景画像が互いに繰り返されることなく、異なる位置から Web ページ全体を覆うようにすることができます。

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
background-position: left top, center center, right bottom;
background-repeat: no-repeat;

複数の背景を使用することで、より複雑な背景デザインを実現し、Web ページをより豊かにすることができます。重ね感と立体感。

つまり、背景画像の再発を防ぐには、Web デザイナーがさまざまな CSS 属性を上手に使いこなせるかどうかにかかっています。単純な背景リピート属性、背景位置決め属性、およびより複雑なマルチ背景メソッドを使用して、Web ページ上で背景画像に最高の効果を与え、Web ページの美しさとユーザー エクスペリエンスを向上させることができます。

以上がCSSで背景を繰り返さないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。