img src und img url Verwendung in CSS und JS

Question

ich versuche, ein Bild auf meinem HTML-Seite anzuzeigen, und bemerkt, dass, wenn ich das Bild CSS hinzufügen möchten, mit i

.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; 
} 

verwenden musste und für das gleiche Bild auf der hTML-Seite verwendet ich musste:

<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> 

so etwas ist der Unterschied hier und warum jede Datei tun lädt das gleiche Bild eine andere Eigenschaft verwenden?

Answer 1

CSS ist für background Bilder, HTML für foreground Bilder. Wenn Ihr HTML-Bild transparent ist, können Sie den Hintergrund sehen.

Ihr CSS-Bild weist einige Funktionen auf, die HTML nicht unterstützt. es kann positioniert werden, Größe, Sie können mit der Leinwand usw. spielen.

Daher, wenn Sie ein Symbol festgelegt haben, manchmal verwenden sie ein Bild mit allen Symbolen darauf und zeigen nur eines dieser Symbole, indem Sie die ändern Leinwand Größe auf die Größe eines Symbols und die Position auf das richtige Symbol. Das erspart Ihnen das Laden von 100 Symbolen.

HTML-Bilder können, anstatt CSS-Bilder, mit Javascript verändert und wiedergegeben werden. Sie können sie auch bearbeiten, wenn Sie möchten. When to use IMG vs. CSS background-image?

ich in der Regel darüber nachdenken, es wie folgt aus:

Sie können bis mehr dazu hier lesen

• Benötige ich Elemente auf dieses Bild haben? - wahrscheinlich CSS Hintergrundbild
• Müssen Sie manchmal nur einen Teil des Bildes zeigen? - wahrscheinlich CSS-Hintergrund
• Muss ich mit diesem Bild interagieren? - wahrscheinlich <image> Tags.
• Müssen Benutzer das Bild drucken, wenn sie die Seite drucken? - definitiv <image> Tags.

Answer 2

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

und

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

sind nicht dasselbe.

Die CSS-Methode fügt Ihr Bild als background zu einem .jumbotron Element, während die HTML-Methode ein neues Bildelement hinzufügt (img) zu Document Object Model (DOM).

Die HTML-Äquivalent für Ihren CSS-Code wäre:

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

Allerdings würde ich CSS Schreibregeln direkt in die DOM entmutigen.

Answer 3

Eine ist eine CSS Eigenschaft namens background-image.

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

Das andere ist ein Element HTMLimg genannt.

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