ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに複数の背景画像を追加できますか?

HTMLに複数の背景画像を追加できますか?

青灯夜游
青灯夜游オリジナル
2021-12-14 12:56:329105ブラウズ

html複数の背景画像を追加できます。 HTML では、background-image または background を使用してコンテナーに複数の背景画像を設定できます。つまり、異なる背景画像を 1 つのブロック要素のみに配置できます。構文は「background:url(画像アドレス),url(アドレス)..」です。 .; "。

HTMLに複数の背景画像を追加できますか?

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

html では、background-image または background を使用してコンテナーに複数の背景画像を設定できます。つまり、1 つのブロック要素にのみ異なる背景画像を配置できます。

最初に構文を見てみましょう:

background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]

複数の背景画像の URL をカンマで区切ります。複数の背景画像があり、他の属性が 1 つだけある場合 (たとえば、 1 つの背景繰り返し) の場合、この属性値はすべての背景画像に適用されます。

例を見てみましょう:

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

HTMLに複数の背景画像を追加できますか?

推奨チュートリアル: "html ビデオ チュートリアル "

以上がHTMLに複数の背景画像を追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。