Qual è la differenza tra l’uso dell’attributo img tag src in HTML per visualizzare l’immagine e modificarla in CSS?

Il risultato è lo stesso, ma credo che ci sia una differenza tra l’uso dell’attributo img tag src in HTML per l’impostazione dell’immagine e dello stile dell’immagine in CSS. Per esempio:

In HTML:

 

e

In HTML:

  

In CSS:

 #my-pic { background-image: url(https://notrealdomain.com/some.png) } 

Fateci vedere al confronto.

Non è sufficiente fornire semplicemente una proprietà background-image , perché l’elemento img non ha height o width intrinseca e la proprietà background-image non può fornire automaticamente ciò nello stesso modo in cui l’attributo src fa. Pertanto, senza dimensioni dichiarate, l’immagine applicata CSS non viene visualizzata.

 #my-pic { background-image: url(https://placehold.it/150); } 
   

La differenza principale tra i due è che uno è usato per lo sfondo (css) e un altro è usato per il primo piano (html).

 Foreground Image (ie  tag) = content Background Image (ie image specified in CSS) = design 

Leggi l’articolo completo dal seguente link.

utilizzando il tag img è ansible impostare sia l’immagine di sfondo che quella di primo piano ma utilizzando CSS puoi solo impostare l’immagine di sfondo. e tutti gli altri attributi possono essere impostati sia in css in linea che in css esterni