CSSのとの違い

background-image は、CSSのスタイルである背景画像

です。

< は動作しています。たとえば、img src のパスを変更すると、画像を変更する目的を達成できます。また、その位置を移動したり、

document

から削除したりすることもできます。

背景は CSS3 スタイル

img は HTML タグ、そして両者の間には本質的な違いがあります

背景画像は大きな背景に存在し、その

属性

設定は多様で、変形はより豊富です

画像に書き込んだり、追加したい他の要素を追加したりできます

一般的に、装飾の場合は、性的な画像にはbackground-imgを使用し、Webページの読み込みプロセス中に、

CSS背景

として存在する画像のbackground-imageを文体的なコンテンツに密接に関連させる場合にはimgを使用します。 image は、構造が読み込まれる (Web ページのすべてのコンテンツが表示される) (後で) まで待機し、HTML のタグ img は Web ページの構造 (コンテンツ) の一部であり、構造を読み込むプロセス中に読み込まれます。つまり、Web ページはまず img タグのコンテンツをロードし、次に背景画像 background-image をロードします。大きな画像を導入した場合、画像がダウンロードされるまで img 以降のコンテンツは表示されません。 CSS を使用して同じ画像を導入する場合、Web ページの構造とコンテンツが読み込まれるまで背景画像は読み込まれないため、Web ページのコンテンツの閲覧には影響しません。

ページ全体の背景などの極端な場合には、躊躇せずに背景画像を使用しますが、ロゴなどの単一の画像の場合は、ロードする必要があるだけで、何も必要ありません。私の理解では、HTML で実装できれば、CSS で記述する必要はありません。単純であればあるほど良いのです。しかし、すべての画像が div の背景画像で記述されているコードを見たとき、これは正しいのか、それとも間違っているのか、突然混乱しました。誰か長所と短所を教えてもらえますか？たとえば、読み込みに違いはありますか? SEOの違い？ありがとう！

簡単に言うと、imgはコンテンツ部分、background-imageは装飾部分です。

少しのテキストは

img

ページ要素に関しては、ページ上の写真が商品写真などの広告写真などのコンテンツとして表示される場合、これはページであるため、img を使用する必要があります。要素の内容。ページ要素のコンテンツに関する最も重要な点は、ページにスタイルがない場合でも、一目でそれが何であるかを知ることができるということです...

background-image

背景画像、装飾的なコンテンツはページ内では不要です。はい、ページの視覚体験をより美しくするためです。いいえ、コンテンツを取得するためのユーザーの Web ページの閲覧には影響しません。

実際、端的に言うと、ページをより美しくするために背景画像がスタイルを通じて読み込まれ、コンテンツ画像がユーザーに表示されることになります。ある日、あなたの Web ページにスタイルがなかったとします。そのとき、Web サイト上のどの写真がユーザーに表示されるかを考えてください。これで十分です。

前景画像 img はデータベースのものであり、ページに表示されるコンテンツに属します。

背景画像は装飾的なものなので、そのままにしないでください。

たとえば、ユーザー画像は前景画像である必要があり、商品リスト画像も前景画像である必要があります。ただし、商品一覧の写真の一部には左上に推奨ラベルや値下げラベルが貼られており、これは明らかに改ざんです。

以上がCSSのとの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。