のimg srcとCSSでのimg URLの使用状況とJS

Question

私は私のhtmlページに画像を表示しようとしている、と私はCSSを使って画像を追加したい場合、私は

.jumbotron { 
    display: flex; 
    align-items: center; 
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg'); 
    background-size: cover; 
} 

とためを使用していたことに気づいています私が使用していたHTMLページ上の同じ画像：

<div class="row"> 
     <figure class="col-sm-6"> 
      <p>Kitchen</p> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg"> 
     </figure> 
    </div> 

のでここでの違い何で、なぜそれぞれのファイルには、異なるプロパティを使用して同じイメージをロードしていますか？

Answer 1

CSSはbackground画像、​​画像用のHTMLのためです。 HTMLイメージが透明であれば、それを通して背景を見ることができます。

あなたのCSSイメージには、HTMLにはない機能がいくつかあります。キャンバスなどでプレイすることができます。

したがって、アイコンが設定されている場合は、アイコンが1つだけ表示され、そのアイコンの1つだけが表示されることがあります。キャンバスのサイズを1つのアイコンのサイズに合わせ、正しいアイコンの位置に合わせます。これにより、100個のアイコンをロードする手間が省けます。

HTMLイメージは、CSSイメージではなく、Javascriptで変更および再生することができます。必要に応じて編集することもできます。私は通常、このように考えてみれ When to use IMG vs. CSS background-image?

：あなたがここにこれをよりアップ読むことができます

• 私はこの画像の上の要素を持っている必要がありますか？ - おそらくCSS背景画像
• ときどき画像の一部だけを表示する必要はありますか？ - おそらくCSSの背景
• この画像とやりとりする必要はありますか？おそらく<image>タグ。
• イメージを印刷する必要がありますか？ - 間違いなく<image>タグ。

Answer 2

.jumbotron { 
    background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg'); 
} 

と

<div class="jumbotron"> 
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg"> 
</div> 

同じものではありません。 HTMLの方法は、あなたのドキュメントオブジェクトモデル（DOM）に、新たな画像要素（img）を追加するのに対し、

CSS方式は、.jumbotron要素へbackgroundとしてあなたの画像を追加します。

あなたのCSSコードのHTML同等は次のようになります。

<div class="jumbotron" style="background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/jumbotron.jpg');"></div> 

しかし、私はDOMに直接書き込みCSSルールを思いとどまらでしょう。

Answer 3

CSSは、background-imageというプロパティです。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

他方はimg呼ばHTML要素です。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img