So positionieren Sie Text über ein Bild?

Oft möchten Webentwickler einen Text über ein Bild legen, um einige Informationen zu diesem bestimmten Bild anzuzeigen. Dies kann auch eine wichtige Rolle bei der Ermachung Ihrer Website oder des Bildes spielt, wodurch die Wahrscheinlichkeit, die Aufmerksamkeit des Benutzers zu erregen. Jetzt gibt es verschiedene Positionen, in denen Sie Ihren Text wie folgt auf einem Bild hinzufügen können.

1. Obere linke Ecke
2. Untere linke Ecke
3. Center
4. Obere rechte Ecke
5. Rechte untere Ecke

Im Folgenden haben wir jede dieser Positionen demonstriert.

Text über ein Bild positionieren

Zunächst werden wir mit HTML ein Bild zu unserer Webseite hinzufügen.

Html

Etwas Text

Im obigen Code haben wir ein DIV -Element erstellt und ein Bild und ein anderes DIV -Element verschachtelt. Die erste DIV hält, wie bereits erwähnt, das Bild und das andere Div. In der Zwischenzeit hält der zweite Div -Behälter die Position und den Stil des Textes, der auf das Bild platziert werden soll.

Ausgang

Auf der Webseite wurde ein Bild eingefügt.

Obere linke Ecke

Die erste Position des Textes, in dem wir festlegen, ist die obere linke Ecke des Bildes. Verwenden Sie den folgenden Code -Snippet.

CSS

.Img-Container
Position: Relativ;
Breite: 400px;

.Bild
Breite: 100%

.oben links
Position: absolut;
Schriftgröße: 20px;
Schriftdicke: fett;
Schriftstil: kursiv;
Farbe weiß;
Top: 15px;
links: 30px;

Die Position des ersten DIV -Elements wurde auf relativ eingestellt, damit wir das zweite Div -Element absolut positionieren können. Der auf das Bild zu platzierte Text wurde in gewisser Weise Größe, Gewicht, Stil und Farbe gegeben, um ihn in der oberen linken Ecke zu positionieren. Wir haben die oberen und linken Eigenschaften verwendet.

Ausgang

Der Text wurde erfolgreich in die obere linke Ecke platziert.

Untere linke Ecke

Verwenden Sie zum Hinzufügen eines Textes in der unteren linken Ecke des Bildes den unten genannten Code.

CSS

.div
Position: Relativ;
Breite: 400px;

.Bild
Breite: 100%

.unten links
Position: absolut;
Schriftgröße: 20px;
Schriftdicke: fett;
Schriftstil: kursiv;
Farbe weiß;
unten: 3%;
Links: 8%;

Der Rest des Codes ist jedoch gleich, um den Text in der unteren linken Ecke zu positionieren. Wir haben die untere Eigenschaft auf 3%eingestellt und die Eigenschaft auf 8%gelassen. Sie können die Werte dieser Eigenschaften ändern, um zu verstehen, wie diese funktionieren.

Ausgang

Der Text wurde mit großer Leichtigkeit in der unteren linken Ecke positioniert.

Center

Betrachten Sie in ähnlicher Weise, um Ihren Text in die Mittelposition zu platzieren, das unten erwähnte Beispiel.

CSS

.div
Position: Relativ;
Breite: 400px;

.Bild
Breite: 100%

.Center
Position: absolut;
Schriftgröße: 20px;
Schriftdicke: fett;
Schriftstil: kursiv;
Farbe weiß;
Top: 40%;
Links: 40%;

Zum Zwecke der Einstellung des Textes in der Mittelposition des Bildes haben wir die obere Eigenschaft eingestellt und die Eigenschaft auf 40% gelassen.

Ausgang

Wir haben den Text erfolgreich in die Mitte des Bildes platziert

Obere rechte Ecke

Wenden Sie sich an den folgenden Code, um zu verstehen, wie Sie Text in der oberen rechten Ecke des Bildes platzieren können.

CSS

.div
Position: Relativ;
Breite: 400px;

.Bild
Breite: 100%

.oben rechts
Position: absolut;
Top: 2%;
Rechts: 10%;
Schriftgröße: 20px;
Schriftdicke: fett;
Schriftstil: kursiv;
Farbe weiß;

Was wir einfach getan haben, um den Text in der oberen rechten Ecke zu platzieren. Dies ist keine harte und schnelle Regel. Daher können Sie diese Werte nach Ihrem Wunsch ändern.

Ausgang

Der Text wurde in der oberen rechten Ecke des Bildes eingefügt.

Rechte untere Ecke

Die letzte Position, die wir demonstrieren werden, ist die untere rechte Ecke des Bildes. Folgen Sie dem folgenden Code.

CSS

.div
Position: Relativ;
Breite: 400px;

.Bild
Breite: 100%

.unten rechts
Position: absolut;
unten: 5%;
Rechts: 10%;
Schriftgröße: 20px;
Schriftdicke: fett;
Schriftstil: kursiv;
Farbe weiß;

Wie Sie sehen können, dass der Rest des Codes mit früheren Beispielen mit nur Unterschied entspricht, dass wir den Text in der unteren rechten Ecke platzieren, haben wir die untere Eigenschaft und die rechte Eigenschaft verwendet.

Ausgang

Der Text wurde in der unteren rechten Ecke platziert.

Abschluss

Um Ihren Text über ein Bild zu positionieren, platzieren Sie Ihr Bild und Ihren Text in einen Div -Container und positionieren Sie den Text absolut. In der Zwischenzeit geben Sie dem Div eine relative Position an. Verschiedene Positionen, die Sie Ihren Text über ein Bild platzieren können. Diese Aufgabe kann mit verschiedenen CSS -Eigenschaften ausgeführt werden. In diesem Beitrag haben wir jede dieser Positionen zusammen mit geeigneten Beispielen demonstriert.