CSSの背景画像を並べて表示するにはどうすればよいですか?

以前は Web ページのレイアウトを行う場合、1 つの div で設定できる背景画像は 1 つだけでした。複数の背景が設定されている場合は、互換性を高めるために複数の div をネストする必要がありました。 Web サイトがブラウザの下位バージョンとの互換性を必要とする場合は、この方法を使用することをお勧めします。 CSS3 の登場により、div では背景が 1 つしか設定できないという問題が解決され、div で複数の背景画像を設定できるようになりました。 background-image線形グラデーションやその他の効果を設定することもできます。

CSS3 の背景に関しては、非常に強力で、background-size などの多くの属性があり、これらの属性についてブログを書くことができます。 css3background のその他のプロパティについては、後ほど個別にブログで説明します。

CSS3/CSS1 背景画像属性

構文:

background-image：<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

デフォルト値: none

値:

none: 背景画像なし。

< url >: 絶対アドレスまたは相対アドレスを使用して 背景画像 を指定します。

: 線形グラデーションを使用して背景画像を作成します。 (CSS3)

: 放射状(放射状)のグラデーションを使用して背景画像を作成します。 (CSS3)

< 繰り返し線形グラデーション>: 繰り返し線形グラデーションを使用して背景画像を作成します。 (CSS3)

: 繰り返し放射状 (放射状) グラデーションを使用して背景画像を作成します。 (CSS3)

説明:

オブジェクト の背景画像を設定または取得します。

background-image が設定されている場合、背景画像が非表示のときにテキストとの一定のコントラストを維持するために、作成者がbackground-color を設定することもお勧めします。

対応するスクリプト機能はbackgroundImageです。

CSSで背景画像を画面いっぱいに引き伸ばす方法

私が書いたCSSコードは

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}

このようにして、画像を画面いっぱいに引き伸ばすようにしたいのです。毛糸ってどうやって書けばいいの？

background:url(images/beijing.png) repeat;

属性を追加します

background-size:100%;background:url(images/beijing.png) no-repeat;

属性を追加しますbackground-size:100%;background:url(images/beijing.png) no-repeat; 画像が歪みます。

外側のフレームは制限されていますが、100% に設定すると、影響する他の属性があるかどうかがわかります。

以上がCSSの背景画像を並べて表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。