IMGタグかBackground-imageか

今日1つの奇妙な問題に出会って、1つのPC端のホームページ、高いスクリーンの上ではっきり表示することができるため、私は統一的に2倍の大きさのピクチャーを使って、このように設備の画素比(device-pixel-ratio)が2の高いスクリーンの上でもはっきり見ることができます.しかし奇妙なことに、普通の画面では、2倍の画像を使う文字はかえってはっきりしていないが、1倍の図を使うとはっきりしている.最後に仕方なく、元のimgタグで実現した画像をbackground-imageに置き換え、media queryを使用してデバイスのmin-device-pixel-ratioが1.5を超える場合は2倍図、その他の場合は1倍図を背景図として使用します.以前はimageラベルとbackground-imageの差が少ないと思っていましたが、background-imageは、画像を変更するためにデバイス情報を検索する必要がある場合に便利で実用的であることがわかりました.さらに両者の違いを比較したいと思い、stackoverflowで比較的完全な答えを見つけ、長年の迷いを解いたとも言える.

印刷可能かどうか.Webページを印刷すると、デフォルトではimgが印刷され、background-imageの内容は印刷されませんので、Webページを設計するときに画像が印刷されることを望んでいないかによって異なります.

SEO.imgタグはalt属性を追加することができ、その意味はブラウザに理解され、スクリーンソフトウェアによって識別されることもできる.一般的に、あなたの画像が周囲の文字内容の一部、例えばロゴ、グラフ、人などであれば、imgを使います.そうでなければbackground-imageを使います.

文字占有-画像置換.text-indent:-9999のようなテクニックを使用して文字を非表示にし、cssのロードに失敗しても文字を表示でき、cssが正常にロードされると画像が表示されます.バックグラウンドマップを使用する必要があります.

background-imageを使用すると、background-size、repeatなどの他のcss属性を使用できます.画像spiritsをサポートし、アニメーション:

 #some_div {
   background-image:url(image_1.jpg);
   -webkit-transition:background-image 0.5s;
   /* Other vendor-prefixed transition properties */
   transition:background-image 0.5s;
 }

 #some_div:hover {
   background-image:url(image_2.jpg);
 }

この数行のcssによりマウスhover時の画像のフェードアウト効果が実現され、jsよりずっと便利です.
簡単に言えば、imgラベルはより良いSEOを得ることができ、background-imageはより柔軟である.また、imgはhtmlラベルに属し、ドキュメントの内容を表し、background-imageはcssに属し、レイアウトを表します.だから、私たちが同時にこの2つを使うことができる時、私たちは自分に聞いて、もしcssを全部取ったら、ページに現れた内容はすべてドキュメントの内容に属しますか?コンテンツに関係なくデザインレイアウトに属するものがあることに気づいたら、imgをbackground-imageに変更することを考えます.
参考記事stackoverflow img and background-image