Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Der Unterschied zwischen und in CSS

黄舟
Freigeben: 2017-06-21 14:13:43
Original
2425 Leute haben es durchsucht

Hintergrundbild ist das Hintergrund-Bild, ein CSS-Stil.

< img / > ein Bild. Es handelt sich um ein HTML-Tag.

Hintergrundbild kann nur angezeigt werden

< Durch Ändern des Pfads von img src kann beispielsweise der Zweck erreicht werden, das Bild zu ändern. Sie können auch seine Position verschieben, es aus dem Dokument entfernen usw.

Der Hintergrund ist ein CSS3-Stil

img ist ein HTML-Tag, es gibt einen wesentlichen Unterschied zwischen den beiden

Hintergrundbild existiert in einem großen Hintergrund, sein Attribut verfügt über verschiedene Einstellungen und umfangreiche Transformationen

Sie können auf „img“ schreiben und andere Elemente hinzufügen, die Sie hinzufügen möchten.

Wenn es sich um ein dekoratives Bild handelt, verwenden Sie im Allgemeinen „background-img“. img

Während des Ladevorgangs der Webseite wird das Bildhintergrundbild, das als CSS-Hintergrundbild vorhanden ist, erst geladen, wenn die Struktur geladen ist (nachdem der gesamte Inhalt der Die Webseite wird angezeigt), und das Tag img in HTML ist die Webseite. Ein Teil der Struktur (Inhalt) wird während des Ladevorgangs der Struktur geladen. Mit anderen Worten, die Webseite lädt zuerst den Inhalt des Tags img , und laden Sie dann das Hintergrundbild „Hintergrundbild“. Wenn Sie ein großes Bild einfügen, wird der Inhalt nach „img“ nicht angezeigt, bis dieses Bild heruntergeladen ist. Wenn Sie CSS verwenden, um dasselbe Bild einzuführen, wird das Hintergrundbild erst geladen, wenn die Webseitenstruktur und der Inhalt geladen sind, was sich nicht auf das Durchsuchen des Webseiteninhalts auswirkt.

Das ist alles. In extremen Fällen, wie zum Beispiel dem Hintergrund der gesamten Seite, werde ich nicht zögern, ein Hintergrundbild zu verwenden, aber für ein einzelnes Bild, wie zum Beispiel ein Logo, muss es nur geladen werden, Und es besteht keine Notwendigkeit, es zu ändern. Ich verstehe, dass es nicht notwendig ist, es in CSS zu schreiben, wenn es in HTML implementiert werden kann. Aber als ich einen Code sah, in dem alle Bilder mit div-Hintergrundbildern geschrieben waren, war ich plötzlich verwirrt. Ist das richtig oder falsch? Kann mir jemand die Vor- und Nachteile nennen? Gibt es zum Beispiel einen Unterschied in der Beladung? SEO-Unterschied? Vielen Dank!

Einfach ausgedrückt ist „img“ der Inhaltsteil und „background-image“ der dekorative Teil.

Ein bisschen Text ist

img

In Bezug auf Seitenelemente, wenn die Bilder auf der Seite als Inhalt erscheinen, beispielsweise als Werbebilder, beispielsweise als Produktbilder Dann muss img verwendet werden, da dies der Inhalt des Seitenelements ist. Der kritischste Punkt beim Inhalt von Seitenelementen ist, dass Sie auch dann auf einen Blick erkennen können, um was es sich handelt, wenn die Seite keinen Stil hat ...

Hintergrundbild

Hintergrundbild, dekorativer Inhalt, entbehrlich auf der Seite. Ja, es soll das visuelle Erlebnis der Seite schöner machen. Nein, es hat keinen Einfluss auf das Surfen des Benutzers auf der Webseite, um Inhalte zu erhalten.

Um es ganz klar auszudrücken: Das Hintergrundbild wird über den Stil geladen, um die Seite schöner zu machen, und das Inhaltsbild soll dem Benutzer angezeigt werden. Angenommen, Ihre Webseite hat eines Tages keinen Stil mehr, dann denken Sie bitte zu diesem Zeitpunkt darüber nach, welche Bilder auf Ihrer Website für Benutzer sichtbar sein sollen. Das wird ausreichen.

Das Vordergrundbild img ist eine datenbasierte Sache und gehört zu dem Inhalt, der auf der Seite angezeigt werden soll.
Das Hintergrundbild ist eine dekorative Sache, daher ist es in Ordnung, es nicht zu verwenden.

Zum Beispiel muss das Benutzerbild das Vordergrundbild sein; das Produktlistenbild ist auch das Vordergrundbild. Allerdings haben einige Bilder in der Produktliste oben links ein Empfehlungsetikett oder ein Preisnachlassetikett, was definitiv eine Modifikation ist.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen und in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage