現在、2つのカテゴリーとの双方向のフロントページが表示さの写真、1が使用するのimgタグは、写真を紹介し、1が使用している背景の背景画像を設定する属性を、これら2つの方法の違いですがありますか？使用すべきかを最終的に背景を、どのように使用すべきであるIMGはありますか？今日は2つのラベルを認識し、どのように使用する方法をあなたと共有し、いくつかの方法
< ボディ> < IMG SRC = "./ A.png" Altキー= "" スタイル= "表示：なし;" > // IMGタグ要素表示：どれもイメージを要求していない < IMG SRC = "./ B.png" Altキー= "" スタイル= "表示：隠された;" > // IMGタグ要素表示：隠された画像要求 < divの スタイル= "背景：URL（ './ c.png'）;表示：なし" > </ DIV > //背景要素の表示：なし要求画像 < divの スタイル=「背景：URL（ './ d.png'）;表示：隠された」 > </ DIV > //背景要素の表示：隠された要求ピクチャー < divのクラス= "父" スタイル= "表示：なし;" > // imgタグの親要素の表示：なし・リクエスト・ピクチャーズ < IMG SRC = "./ a1.png" ALT = "" > </ divの> < divのクラス= "父" スタイル= "表示：隠された;" > //親要素IMGタグ表示：隠された画像要求 < IMG SRC = "./ b1.png" Altキー= "" > </ divの> <DIV クラス=「父」スタイル= "表示：なし;" > //親要素の背景要素の表示：なし なし画像要求 < divの スタイル= "背景：URL（ './ c1.png'）;" > </ DIV > </ DIV > < DIV クラス= "父" スタイル= "表示：隠された;" > //背景要素の親要素の表示：隠された要求画像 < divの スタイル= "背景：URL（ './ d1.png'）;" > </ divの> </ DIV > </ ボディ>
結果
第一の態様：ローディング速度の観点から
imgタグのページでは、背景要素、ロードされたHTMLタグをスタイルシート要素を実行しますロード・シーケンス、ロードimgタグの優先順位に従って、フロントページに属する属性に属します。
背景は実際には、即座にページに移動しないとラベルをロードした後、スタイルでそれを実行しますが、ページの読み込みが完了したときにのみ、CSSスタイルの構造を行うために、IMGの表示画像を先行するように、多くの人々は、体内にロードされたそのスタイルのラベルを思うだろう。
したがって、からビューIMGの読み込み速度の速い点バックグラウンドより。
第二の態様：ユーザーの視点から
画像のimgタグが表示され、ユーザーはローカルの右に保存することができ、ユーザーが背景表示を保存することはできません。
画像がエラーをロードされると、IMGのALTは、この画像領域のユーザーページが表示されるが、背景が行うことができないものを伝えるために言葉を使用することができます。
Dバーコード画像imgタグは、二次元コード認識を押して電話することができ
背景画像は、電話で二次元コード、二次元コード認識押しではありません
使用IMG ALT]タブとは、映像コンテンツを含むスクリーンリーダー、とのページの主な内容を学ぶことができる視覚障害の読者を助けることができるテキストを設定しますが、バックグラウンドの使用を達成することができません。
第三の態様：ビューのSEOの観点から
検索結果のフロントディスプレイのできるだけ私たちのサイトに検索エンジンのために、私たちは、当社のウェブページの内容を読み取ることができる検索エンジン必要が。私たちは、今のエンジンは、で説明したように、直接画像コンテンツを取得することができない検索されている検索エンジンは画像を直接読み込むことができませんので、十分な検索エンジンは、画像の情報を知らせることができIMG alt属性、および背景。
第四の態様：意味的に
IMGは、ページのコンテンツの一部を表しており、背景はスタイルだけで、プレーのスタイルは、変形例であるので、我々はあなたがウェブサイトのコンテンツに表示したい画像を表示したいときなど、時間のユーザ部分である：製品の紹介、ニュース絵は、米国によると、その上、我々はIMGを使用する必要があります。この写真が唯一の装飾的な役割を果たしているとき、私たちはバックグラウンドを使用することができます。
両方の最終的な表示と同じ効果が、しかし、使用目的に応じて、私達は行くためにどの方法を私たちの最終的な選択を調整するための柔軟性を必要とします。