La différence entre et en CSS

background-image est l'arrière-plan picture, qui est un style de CSS

< une image. C'est une balise html

l'image d'arrière-plan ne peut être visualisée que

< Par exemple, changer le chemin de img src peut atteindre l'objectif de changer l'image, ou vous pouvez déplacer sa position, la supprimer du document, etc.

l'arrière-plan est un style CSS3

img est une balise HTML, il y a une différence essentielle entre les deux

background-image existe dans un grand fond, son attribut a divers réglages et de riches transformations

Vous pouvez écrire du texte sur img et ajouter d'autres éléments que vous souhaitez ajouter

De manière générale, s'il s'agit d'une image décorative, utilisez background-img. Si elle est très liée au contenu stylistique, utilisez. img

Pendant le processus de chargement de la page Web, l'image background-image qui existe en tant qu'image css background ne commencera pas à se charger tant que la structure n'est pas chargée (après tout le contenu de la page web est affichée), et la balise img en html est la page web Une partie de la structure (contenu) sera chargée lors du processus de chargement de la structure En d'autres termes, la page web va d'abord charger le contenu de la balise img. , puis chargez l'image d'arrière-plan background-image Si vous utilisez pour introduire une grande image, jusqu'à ce que cette image soit téléchargée, le contenu après img ne sera pas affiché. Si vous utilisez CSS pour introduire la même image, l'image d'arrière-plan ne sera pas chargée tant que la structure et le contenu de la page Web ne seront pas chargés, ce qui n'affectera pas la navigation dans le contenu de la page Web.

C'est tout. Dans les cas extrêmes, comme le fond de la page entière, je n'hésiterai pas à utiliser background-image, mais pour une seule image, comme un logo, il suffit de la charger, et il n'est pas nécessaire de le modifier. Quelles opérations complexes il effectue, je crois comprendre que s'il peut être implémenté en HTML, il n'est pas nécessaire de l'écrire en CSS. Plus c'est simple, mieux c'est. Mais quand j'ai vu un morceau de code où toutes les images étaient écrites avec des images d'arrière-plan div, j'ai été soudainement confus. Est-ce vrai ou faux ? Quelqu'un peut-il me dire les avantages et les inconvénients ? Par exemple, y a-t-il une différence de chargement ? Différence SEO ? Merci beaucoup!

Pour faire simple, img est la partie contenu et background-image est la partie décorative.

Un peu de texte est

img

En termes d'éléments de page, si les images de la page apparaissent comme du contenu, comme des images publicitaires, comme des images de produits , alors cela doit utiliser img, car il s'agit du contenu de l'élément de page. Le point le plus critique concernant le contenu des éléments de la page est que lorsque la page n'a pas de style, vous pouvez toujours savoir de quoi il s'agit d'un coup d'œil...

image d'arrière-plan

Image d'arrière-plan, contenu décoratif, dispensable dans la page. Oui, il s'agit de rendre l'expérience visuelle de la page plus belle ; non, cela n'affecte pas la navigation de l'utilisateur sur la page Web pour obtenir du contenu.

En fait, pour parler franchement, l'image d'arrière-plan est chargée via le style pour rendre la page plus belle, et l'image du contenu doit être affichée à l'utilisateur. Supposons qu'un jour votre page Web n'ait aucun style, alors à ce moment-là, réfléchissez aux images de votre site Web que les utilisateurs pourront voir, cela suffira.

L'image de premier plan img est un élément basé sur des données et appartient au contenu à afficher sur la page.
L'image d'arrière-plan est un élément décoratif, vous pouvez donc ne pas l'utiliser.

Par exemple, l'image de l'utilisateur doit être l'image de premier plan ; l'image de la liste de produits est également l'image de premier plan. Cependant, certaines images de la liste de produits comportent une étiquette de recommandation ou une étiquette de réduction de prix dans le coin supérieur gauche, ce qui constitue définitivement une modification.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!