css - ウェブデザインでいつ画像を使用し、いつ背景画像を使用するのですか?

Question

私は趣味の Web デザイナーで、HTML と CSS を使用してさまざまな Web サイト デザインをテストしています。ただし、常に私を混乱させる特定のことは、画像をタグとして使用するか、css または html を介して背景として使用するかの決定です。これに対する彼らの経験則はありますか？

Answer 1

回答の 1 つが指摘したように、コンテンツと実際のページ スタイルを区別する必要があります。

それについて詳しく説明しましょう。background-image プロパティの目的は、ページの特定のブロックの外観を定義するために使用されdivますp。imgまた、ページのデザイン (パターン、ロゴ、グラデーションなど) を定義するコンテキスト内の画像は、タグの明示的な形式を取ることはほとんどありません。このタグは、目前のニュースにリンクされたコンテンツ イメージ (描写しようとしているストーリーに固有のもの) を定義するために使用されます。

これらの 2 つの概念を区別することは非常に重要です。なぜなら、それによって、本来あるべきように、基礎となるコンテンツとは独立した優れた設計を熟考できるようになるからです。均一でエレガントで正確。

ということで、レビュー。background-imageWeb サイトを構成するさまざまなブロックの外観を定義するために使用し、コンテキスト固有のビジュアル コンテンツを追加する場合はクラシックタグを使用します。 img

Answer 2

問題は、コンテンツまたはスタイリングが画像に線を引くのに適した場所であるかどうかです。

この画像は再利用されますか？等

Answer 3

画像をドキュメント フローの一部にして、検索エンジン (代替テキスト) に説明を与えますか? img タグを使用します。

画像の上に他の要素 (テキスト、著作権情報など) を配置する場合は、背景画像を使用します。背景画像の上に透明な画像を配置して、効果を得るために組み合わせることもできます。

さらに、背景画像の配置を使用してパフォーマンス上の利点 (「スプライト」) を得る多くの例が存在します。