Dieser Beitrag erklärt, wie man eine Bildunterschrift unter ein Bild schreibt.
Wie schreibe ich eine Bildunterschrift unter ein Bild?
Um eine Bildunterschrift unter ein Bild zu schreiben, bieten wir verschiedene Methoden an, die unten aufgeführt sind:
- Methode 1: So fügen Sie eine Bildunterschrift mit HTML hinzu“
' Element? - Methode 2: So fügen Sie eine Bildunterschrift mit „ ' Element?
Methode 1: Wie füge ich eine Bildunterschrift mit dem HTML-Element „
“ hinzu? Gehen Sie wie folgt vor, um eine Bildunterschrift hinzuzufügen:
- Fügen Sie zuerst das „
”-Element, das zur Darstellung eigenständiger Inhalte verwendet wird, möglicherweise mit einer optionalen Beschriftung. - Als nächstes fügen Sie ein „
„Tag innerhalb des Absatzes“ ' Schild. Fügen Sie das Bild hinzu, indem Sie das „ Quelle ” Attribut. Die ' alles ”-Eigenschaft zeigt den hinzugefügten Inhalt an, wenn das Bild aus irgendeinem Grund nicht angezeigt wurde. - Stellen Sie die Bildbreite als „ 200px “.
- Dann ist die '
”-Tag wird verwendet, um die Bildunterschrift hinzuzufügen. Fügen Sie außerdem die Beschriftung zwischen den „ “-Tags hinzu:
>Sie können sehen, dass das Bild mit der angegebenen Beschriftung angezeigt wurde:
Fahren Sie nun mit der zweiten Methode fort, um die Beschriftung mit CSS hinzuzufügen.
Methode 2: Wie füge ich eine Bildunterschrift mit dem Element „
“ hinzu?Um die Bildunterschrift mit dem „
”-Element, probieren Sie die gegebenen Anweisungen aus:
- Ein ... kreieren ' ” Container und fügen Sie ein Klassenattribut mit dem Namen “ Bildhalter “.
- Überschriften-Tag hinzufügen „ ” zum Einfügen der Überschrift und gestalten Sie die Überschrift nach Ihrer Wahl.
- Fügen Sie ein weiteres „
“-Element hinzu und fügen Sie ein „”Tag zusammen mit” Quelle “, „ alles ' und ' Breite ”-Attribute zwischen dem div-Container. - Fügen Sie ein drittes „
“ mit dem Klassennamen „ Bildunterschrift “. Geben Sie dann die Beschriftung zwischen den „“-Tags ein. Außerdem ist die „
”-Element wird verwendet, um einen Zeilenumbruch hinzuzufügen:
>
>Es kann beobachtet werden, dass die Beschriftung für das Bild erfolgreich hinzugefügt wurde:
Gehen wir nun zum CSS-Abschnitt zum Anwenden der Eigenschaften.
Stil „.image-holder“ in CSS
Greifen Sie zunächst auf „
„Element mit einer Klasse“ .image-holder “. Wenden Sie dann die folgenden CSS-Eigenschaften an: .image-holder {
Position : relativ ;
Höhe : 100px ;
Breite : 200px ;
Rand : Auto ;
}Die Details der oben genannten Eigenschaften werden im Folgenden beschrieben:
- Die ' Position “ ist eingestellt als „ relativ “, um die ursprüngliche Position eines Elements anzugeben, die im Fluss des Dokuments verbleibt, genau wie der statische Wert.
- Dann, ' Höhe “ wird verwendet, um die Elementhöhe zu definieren.
- Die ' Breite ”-Eigenschaft gibt die Größe des Elements in der Breite an.
- Die ' Rand “ ist eingestellt als „ Auto ” um den Abstand automatisch um das Element herum festzulegen.
Bildunterschrift in CSS formatieren
In diesem Schritt greifen wir auf die beiden Klassen mit dem Namen „ Bildhalter ' und ' Bildunterschrift “ und wenden Sie die folgenden CSS-Eigenschaften an:
.image-holder .img-Beschriftung {
Position : absolut ;
Textausrichtung : Center ;
Schriftstärke : deutlich ;
Breite : 200px ;
Höhe : 50px ;
links : 0px ;
Farbe : #f80909 ;
Hintergrund : rgb ( 140 , 166 , 253 ) ;
}Die Beschreibung der oben genannten Eigenschaften lautet wie folgt:
- Die ' Textausrichtung „Eigenschaft ist festgelegt als“ Center ” zum Ausrichten der Textposition in der Mitte.
- Nächste, ' Schriftstärke “ wird zugeordnet als „ deutlich “, um die Schriftart der Bildunterschrift festzulegen.
- Dann ist die ' Farbe ”-Eigenschaft wird verwendet, um die Farbe des Elements festzulegen, auf das zugegriffen wird.
- Die ' Hintergrund ”-Eigenschaft legt die Farbe des Elementhintergrunds fest.
- Andere Eigenschaften, einschließlich „ Position “, „ Höhe ', und ' Breite “ werden ebenfalls verwendet, um die jeweiligen Funktionalitäten anzuwenden.
Ausgabe
Wir haben die Methoden zum Schreiben der Bildunterschrift unter einem Bild besprochen.
Fazit
Um eine Bildunterschrift unter ein Bild zu schreiben, können Benutzer entweder das „
” Element oder ein einfaches “ „Behälter. Um „“ zu verwenden, fügen Sie zuerst „ ”-Element zum Einbetten des Bildes in das “ ”-Element, verwenden Sie dann das “ ”-Element und fügen Sie eine Beschriftung zwischen seinen Tags hinzu. Beim zweiten Ansatz können Benutzer einfach das „ ”-Element und wenden Sie verschiedene CSS-Eigenschaften an, um die Beschriftung zu verschönern. Dieser Beitrag hat die Methoden zum Schreiben der Bildunterschrift unter einem Bild demonstriert.
- Fügen Sie zuerst das „