In HTML machen Bilder Websites attraktiver und erreichen die Absicht der Menschen. Es ermöglicht Entwicklern, ihre Webseiten mit verschiedenen Bildern anzupassen. Darüber hinaus können sie sie direkt aus dem Internet hinzufügen, indem sie die URL des gewünschten Bildes kopieren und dann als Wert des “angebensrc”Attribut im Bild -Tag. Darüber hinaus können Entwickler das Bild mit Hilfe der CSS -Eigenschaft hinzufügen, die als "bekannt als"Hintergrundbild”.

Dieser Beitrag erklärt kurz die Methode zum Hinzufügen des Bildes aus einer URL.

So fügen Sie ein Bild von einer URL in HTML/CSS hinzu?

In HTML/CSS stehen zwei Methoden zur Verfügung, um ein Bild mit der unten aufgeführten URL hinzuzufügen:

• Methode 1: Fügen Sie das Bild mit einem Element in HTML hinzu
• Methode 2: Bild mit CSS -Eigenschaften in HTML hinzufügen

Methode 1: Bild hinzufügen, indem Sie Element verwenden

Der "Element ist ein einzelnes Void -Element, das keinen untergeordneten Inhalt und keinen End -Tag hat. Der "src" Und "Alt”Sind zwei wichtige Attribute, die im Tag„ “verwendet werden.

Schauen wir uns die folgenden Anweisungen an, um ein Bild mit dem Element hinzuzufügen!

Schritt 1: Machen Sie einen DIV -Behälter

Erstellen Sie zunächst einen Div -Container, indem Sie das verwenden “" Schild. Dann fügen Sie die “ein“Klasse”Attribut und weisen Sie der Klasse nach dem Verlangen einen Namen zu.

Schritt 2: Überschrift einfügen

Verwenden Sie als nächstes das erforderliche Überschriften -Tag von “

" Zu "

" Schild. Zum Beispiel werden wir das nutzen

Tag.

Schritt 3: Fügen Sie ein Bild mit URL hinzu

Danach fügen Sie eine hinzu "”Tag und fügen Sie die unterlisteten Attribute in das Bild-Tag ein und fügen Sie ein:

• “srcDas Attribut wird zum Hinzufügen der Mediendatei verwendet. Starten Sie zu diesem Zweck Ihren gewünschten Webbrowser und kopieren Sie die gewünschte Bild -URL.
• Geben Sie dann die URL als Wert der an “ansrc”Attribut.
• Nächste, "Alt”Wird verwendet, um einen Namen für das Bild hinzuzufügen, wenn es aus irgendeinem Grund nicht angezeigt wird.
• “HöheEigenschaft gibt die Höhe des Elements gemäß dem angegebenen Wert an.
• “Breite”Verwendet, um die Breite des Elements festzulegen:

Fügen Sie Bild mit URL hinzu

Nach der untergegebenen Ausgabe wurde das angegebene Bild erfolgreich hinzugefügt:

Methode 2: Bild mit CSS -Eigenschaften in HTML hinzufügen

Entwickler können das Bild auch mit dem CSS von einer URL hinzufügen “Hintergrundbild”CSS. Befolgen Sie zu diesem Zweck die untergegebenen Schritte.

Schritt 1: Überschrift einfügen

Fügen Sie zunächst einen Überschriftentext mit Hilfe des

Eröffnungs- und Schließen von Tag.

Schritt 2: DIV -Container erstellen

Erstellen Sie als Nächstes einen Div -Container, indem Sie das Tag verwenden und ein Klassenattribut mit seinem Namen hinzufügen:

Fügen Sie Bild mit URL hinzu

Schritt 3: Behälter zugreifen

Greifen Sie nun über den DOT -Selektor auf die Klasse zu “.Und der Klassenname, der zuvor erstellt wurde.

Schritt 4: Fügen Sie Bild mit der CSS-Eigenschaft "Hintergrundbild" hinzu

Wenden Sie anschließend die folgenden CSS-Eigenschaften an, um das Bild aus einer URL innerhalb der Klasse hinzuzufügen:

.Img-Container
Höhe: 400px;
Breite: 250px;
Hintergrundgröße: enthalten;
Hintergrund-Image: URL (https: // bilder.Pexels.com/fotos/2260800/pexels-photo-2260800.JPEG?auto = compress & cs = tinysrgb & w = 1260 & h = 750 & dpr = 1)

Im obigen Code:

• “HöheEigenschaft wird verwendet, um die Höhe des Elements festzulegen.
• “Breite”Wird verwendet, um die Breite des Elements anzugeben.
• “Hintergrundgröße”Wird verwendet, um die Hintergrundelementgröße festzulegen.
• “HintergrundbildEigenschaft fügt ein Bild auf der Rückseite des Elements hinzu. Für diesen entsprechenden Zweck die “URL ()"Funktion wird zum Hinzufügen des Bildes und zum Einfügen der URL des Bildes in der Funktion verwendet"()”.

Ausgang

Sie haben die verschiedenen Methoden zum Hinzufügen von Bildern aus einer URL erfahren.

Abschluss

Um ein Bild von einer URL hinzuzufügen, können Entwickler die “nutzen“" Schild. Dann fügen Sie die “ein“srcAttribut und die URL als "SRC" -Wert zuweisen. Darüber hinaus kann der Benutzer ein Bild aus der URL hinzufügen, indem der CSS verwendet wirdHintergrundbild" Eigentum. In diesem Artikel wurde die Methoden zum Hinzufügen des Bildes aus der URL in HTML/CSS angegeben.