この学習ガイドでは、CSS で背景画像を使用する方法を示します。それでは始めましょう！
CSS で複数の背景画像を利用する方法は?
CSS「 バックグラウンド 」 プロパティは、background、background-attachment、clip、image、repeat、origin、size、および position プロパティを含む省略形のプロパティです。 background プロパティは、複数の画像の URL を指定するために使用できます。これらの画像は、それに応じて配置および設定されます。
1 つの div 要素に Web ページのロゴとして 1 つの画像のみが含まれ、2 つ目の要素には 3 つの画像が含まれている例を見てみましょう。
例: CSS を使用して複数の背景画像を追加する
HTML で、ロゴの div 要素を追加し、クラス名を指定します。たとえば、「 ロゴ 」。 2 番目の div は複数の画像を使用するため、「 複数画像 」。ただし、好みに応じてクラス名を指定できます。
HTML
< 分周 クラス = 'ロゴ' >< / 分周 >< 分周 クラス = 「複数画像」 >< / 分周 >
次のセクションでは、CSS の background プロパティを使用して画像を調整します。
スタイル「ロゴ」div
。ロゴ {幅 : 100% ;
身長 : 50px ;
パディング : 5px ;
マージン : 5px ;
背景サイズ : 100px ;
バックグラウンドリピート : 繰り返しなし ;
背景画像 : URL ( images/linux-logo.png ) ;
}
クラス “ を持つ div 要素 ロゴ 」は、次のプロパティで適用されます。
- 「 幅 」プロパティは、要素の幅を「 100% 」。
- 「 身長 」プロパティは、要素の高さを「 50px 」。
- 「 パディング 」プロパティは、「 5px 要素の指定されたコンテンツの前後のスペース。
- 「 マージン 」プロパティは、「 5px 」要素の周りのスペース。
- 「 背景サイズ 」プロパティは、要素の背景画像サイズを「 100px 」。
- 「 バックグラウンドリピート 」値で「 繰り返しなし 」は背景を一度だけ表示します。
- 「 背景画像 」プロパティは、画像の URL を指定するために使用されます。
スタイル「複数画像」div
.複数画像 {幅 : 90% ;
身長 : 45vh ;
マージン : 1px 自動 ;
パディング : 20px ;
背景サイズ : 150px ;
背景色 : RGB ( 157 、 154 、 151 ) ;
背景画像 : URL ( images/office.png ) 、 URL ( 画像/html.png ) 、 URL ( images/laptop.png ) ;
バックグラウンドリピート : 繰り返しなし 、 繰り返しなし 、 繰り返しなし ;
背景位置 : 左 、 中心 、 右 ;
}
次に、他のコンテナーを次のようにスタイルします。
- 「 背景色 」 プロパティは、要素の背景色を指定します。
- 「 背景画像 」プロパティは、複数の画像 URL を指定します。
- 「 バックグラウンドリピート 」プロパティは、background-image プロパティで指定された一連の画像内の画像の値を設定します。どちらの画像も非繰り返しとして設定されているため、ブラウザに 1 回だけ表示されます。
- 「 背景位置 」は、background-image プロパティで指定された一連の画像内の画像の位置を調整します。最初の画像は左側に配置され、2 番目の画像は中央に配置され、3 番目の画像は右側に配置されます。
上記のコードを提供すると、ブラウザの結果は次のようになります。
このようにCSSで複数の画像の位置を調整することができます。
結論
アプリケーションを楽しくインタラクティブにするために、開発者はさまざまな画像や色を使用します。 background-position、background-repeat、background-size などの CSS 背景プロパティを使用して、複数の画像を設定できます。このマニュアルでは、CSS の例を使用して複数の背景画像の使用法を示しました。