CSS背景画像–Divに画像URLを追加する方法

Webページに1つまたは2つの画像を配置するとします。1つの方法は、background-imageCSSプロパティを使用することです。

このプロパティは、同様に、要素に1枚のまたは複数の背景画像を適用しドキュメントを説明しているように。Webページにテクスチャ背景を追加するなど、美的理由で使用します。

画像を追加する

background-imageプロパティを使用して画像を追加するのは簡単です。url()値に画像へのパスを指定するだけです。

以下の例に示すように、画像パスはURLにすることができます。

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

または、ローカルパスにすることもできます。次に例を示します。

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

複数の画像を追加する

background-imageプロパティに複数の画像を適用できます。

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

それはたくさんのコードです。分解してみましょう。

各画像url()値はコンマで区切ります。

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

次に、追加のプロパティを適用して、画像を配置および強調します。

background-repeat: no-repeat, no-repeat; background-position: right, left; 

上記の例で使用したbackground-repeatやなど、背景画像に追加できるサブプロパティがいくつかありますbackground-position。背景画像にグラデーションを追加することもできます。

すべてをまとめると、どのように見えるかを確認してください。

注文事項

積み重ね順序のため、画像をリストする順序が重要になります。これは、ドキュメントによると、リストされている最初の画像がユーザーに最も近いことを意味します。次に、次の1つ、次の1つ、というように続きます。

これが例です。

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

上記のコードに2つの画像をリストしました。最初の画像(morocco-blue.png)は、2番目の画像(oriental-tiles.png)の前に表示されます。どちらの画像も同じサイズで不透明度が低いため、最初の画像のみが表示されます。

ただし、2番目の画像(oriental-tiles.png)を200ピクセル右に移動すると、その一部が表示されます(残りは非表示のままです)。

すべてをまとめると、次のようになります。

いつ背景画像を使用する必要がありますか?

background-imageプロパティについて好きなことがたくさんあります。しかし、欠点があります。

スクリーンリーダーを使用しているユーザーのように、すべてのユーザーが画像にアクセスできるとは限らない、とドキュメントは指摘しています。

これは、background-imageプロパティにテキスト情報を追加できないためです。その結果、画像はスクリーンリーダーで見落とされます。

このbackground-imageプロパティは、ページに装飾を追加する必要がある場合にのみ使用してください。それ以外の場合、ドキュメントに記載されているように、画像に意味や目的がある場合はHTML要素を使用します。

このように、画像altを説明する属性を使用して、画像要素にテキストを追加できます。提供されたテキストは、スクリーンリーダーによって取得されます。

このように考えてください。これbackground-imageはCSSプロパティであり、CSSはプレゼンテーションまたはスタイルに重点を置いています。HTMLはセマンティクスまたは意味に焦点を合わせています。

画像に関しては、選択肢があります。装飾に画像が必要な場合は、background-imageプロパティが適している可能性があります。

私はプログラムを学ぶこととそれを実行するための最良の方法について書いています( amymhaddad.com)。