Wie man eine Bildunterschrift unter einem Bild schreibt? - CSS

In HTML/CSS können Benutzer verschiedene Bilder und Logos hinzufügen, während Sie Webseiten erstellen. Darüber hinaus ermöglicht es den Benutzern, eine Bildunterschrift des Bildes hinzuzufügen und sich in verschiedenen Formen anzumelden. Zum Beispiel können Benutzer die Bildunterschrift unter dem Bild oben, links oder rechts hinzufügen. Zu diesem Zweck die “Element wird verwendet.

Dieser Beitrag erklärt das Schreiben einer Bildunterschrift unter einem Bild.

Wie man eine Bildunterschrift unter einem Bild schreibt?

Um eine Bildunterschrift unter einem Bild zu schreiben, werden wir unten verschiedene Methoden bereitstellen:

• Methode 1: So fügen Sie Bildunterschriften mithilfe von HTML hinzu “" Element?
• Methode 2: So fügen Sie Bildunterschriften mit "hinzu"" Element?

Methode 1: So fügen Sie Bildunterschrift mithilfe des HTML -Elements hinzu?

Um eine Bildunterschrift hinzuzufügen, gehen Sie die folgenden Anweisungen durch:

• Zunächst fügen Sie die "hinzu"Element, das zur Darstellung von in sich geschlossenem Inhalt verwendet wird, möglicherweise mit einer optionalen Beschriftung.
• Als nächstes setzen Sie eine “ein“"Tag im Absatz"

  " Schild. Fügen Sie das Bild hinzu, indem Sie das verwenden "src”Attribut. Der "AltEigenschaft zeigt den hinzugefügten Inhalt an, wenn das Bild aus irgendeinem Grund nicht angezeigt wurde.

• Stellen Sie die Bildbreite als "200px”.
• Dann ist die "Das Tag wird verwendet, um die Bildunterschrift für das Bild hinzuzufügen. Fügen Sie außerdem die Bildunterschrift zwischen den "" -Tags hinzu:

>

Sie können sehen, dass das Bild mit der angegebenen Bildunterschrift angezeigt wurde:

Bewegen Sie sich nun auf die zweite Methode zum Hinzufügen der Bildunterschrift mit CSS.

Methode 2: So fügen Sie Bildunterschriften mit dem Element "" hinzu?

So fügen Sie die Bildunterschrift mit der "hinzu"Element, probieren Sie die angegebenen Anweisungen aus:

• Ein ... kreieren ""Container und fügen Sie ein Klassenattribut mit dem Namen hinzu"Bildhalter”.
• Überschriften -Tag hinzufügen “

  ”Zum Einfügen der Überschrift und zum Stylen der Überschrift entsprechend Ihrer Wahl.

• Fügen Sie ein weiteres "" -Element hinzu und fügen Sie ein "ein""Tag zusammen mit"src","Alt" Und "Breite”Attribute zwischen dem Div -Behälter.
• Fügen Sie mit dem Klassennamen ein drittes "" hinzu "IMG-Kapion”. Geben Sie dann die Bildunterschrift zwischen den „“ -Tags an. Darüber hinaus die “
  Element wird verwendet, um einen Zeilenumbruch hinzuzufügen:

HTML -Bild

TSL Content Creators

Es kann beobachtet werden, dass die Bildunterschrift für das Bild erfolgreich hinzugefügt wurde:

Gehen wir nun in den CSS -Abschnitt, um die Eigenschaften anzuwenden.

Stil ".Bildhalter “in CSS

Erstens zu "auf die" zu ""Element mit einer Klasse".Bildhalter”. Wenden Sie dann die folgenden CSS -Eigenschaften an:

.Bildhalter
Position: Relativ;
Höhe: 100px;
Breite: 200px;
Rand: Auto;

Die Details der oben genannten erwähnten Eigenschaften werden nachstehend beschrieben:

• Der "Position”Wird als" eingestellt "relativUm 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.
• Der "Breite”Eigenschaft gibt die Größe des Elements in der Breite an.
• Der "Rand”Wird als" eingestellt "Auto”Um den Speicherplatz automatisch um das Element zu setzen.

Stilunterschrift in CSS

In diesem Schritt werden wir mit dem Namen auf die beiden Klassen zugreifen “Bildhalter" Und "IMG-KapionUnd wenden Sie die folgenden CSS -Eigenschaften an:

.Bildhalter .IMG-Caption
Position: absolut;
Text-Align: Mitte;
Schriftdicke: fett;
Breite: 200px;
Höhe: 50px;
links: 0px;
Farbe: #F80909;
Hintergrund: RGB (140, 166, 253);

Die Beschreibung der oben genannten Eigenschaften lautet wie folgt:

• Der "Textausrichtung"Eigenschaft wird als" festgelegt "Center”Zum Ausrichten der Textposition in der Mitte.
• Nächste, "Schriftgewicht"Wird als" zugewiesen "deutlichSo setzen Sie die Bildunterschrift -Schriftart.
• Dann ist die "FarbeDie Eigenschaft wird verwendet, um die Farbe des aufgerufenen Elements festzulegen.
• Der "HintergrundEigenschaft legt die Farbe des Elementhintergrunds fest.
• Andere Eigenschaften, einschließlich “Position","Höhe", Und "BreiteWerden auch verwendet, um die jeweiligen Funktionen anzuwenden.

Ausgang

Wir haben die Methoden zum Schreiben der Bildunterschrift unter einem Bild diskutiert.

Abschluss

Um eine Bildunterschrift unter einem Bild zu schreiben, können Benutzer entweder die „verwenden“ verwenden"Element oder ein einfaches"”Container. Um das "" zu verwenden, fügen Sie zunächst das hinzu "Element, um das Bild in die “einzubetten“Element verwenden dann das Element "" und fügen Sie eine Bildunterschrift zwischen seinen Tags hinzu. Im zweiten Ansatz können Benutzer einfach das verwenden “Element und verschiedene CSS -Eigenschaften anwenden, um die Beschriftung zu verschönern. Dieser Beitrag hat die Methoden zum Schreiben der Bildunterschrift unter einem Bild gezeigt.