Jak ustawić tekst nad obrazem?

Często twórcy stron internetowych chcą umieścić tekst na obrazie, aby wyświetlić informacje dotyczące tego konkretnego obrazu. Może to również odgrywać ważną rolę w uczynieniu Twojej witryny lub obrazu bardziej atrakcyjnym, tym samym zwiększając szansę na przyciągnięcie uwagi użytkownika. Teraz istnieją różne pozycje, w których możesz dodać tekst na obrazie w następujący sposób.

1. Górny lewy róg
2. Lewy dolny róg
3. Centrum
4. Prawy górny róg
5. Dolny prawy róg

Poniżej pokazaliśmy każdą z tych pozycji.

Ustaw tekst nad obrazem

Przede wszystkim dodamy obraz do naszej strony internetowej za pomocą HTML.

Html

Jakiś tekst

W powyższym kodzie utworzyliśmy element DIV i zagnieżdżyliśmy obraz i inny element DIV. Pierwszy div, jak już wspomniano, zawiera obraz i drugi div. Tymczasem drugi pojemnik Div ​​utrzymuje pozycję i styl tekstu, który ma być umieszczony na obrazie.

Wyjście

Obraz został wstawiony na stronie internetowej.

Górny lewy róg

Pierwsza pozycja tekstu, w którym zamierzamy ustawić, jest lewy górny róg obrazu. Użyj następującego fragmentu kodu.

CSS

.IMG-CONTAINER
Pozycja: względny;
szerokość: 400px;

.obraz
szerokość: 100%

.lewy górny
Pozycja: absolutna;
Rozmiar czcionki: 20px;
Font-Weight: Bold;
Styl czcionki: Kursywa;
kolor biały;
TOP: 15px;
Po lewej: 30px;

Pozycja pierwszego elementu DIV została ustawiona na względną, abyśmy mogli absolutnie ustawić drugi element DIV. Tekst, który ma zostać umieszczony na obrazie, otrzymał pewien rozmiar, wagę, styl i kolor, tymczasem do ustawienia go w lewym górnym rogu, użyliśmy górnej i lewej właściwości.

Wyjście

Tekst został pomyślnie umieszczony w lewym górnym rogu.

Lewy dolny róg

W celu dodania tekstu w lewym dolnym rogu obrazu użyj kodu wspomnianego poniżej.

CSS

.div
Pozycja: względny;
szerokość: 400px;

.obraz
szerokość: 100%

.na dole po lewej
Pozycja: absolutna;
Rozmiar czcionki: 20px;
Font-Weight: Bold;
Styl czcionki: Kursywa;
kolor biały;
Dół: 3%;
Po lewej: 8%;

Reszta kodu jest jednak taka sama, aby ustawić tekst w lewym dolnym rogu, ustawiliśmy dolną właściwość na 3%, a lewa właściwość na 8%. Możesz zmienić wartości tych właściwości, aby zrozumieć, jak te działają.

Wyjście

Tekst był z łatwością ustawiony w lewym dolnym rogu.

Centrum

Podobnie, aby umieścić tekst w pozycji środkowej, rozważ poniżej wspomniany przykład.

CSS

.div
Pozycja: względny;
szerokość: 400px;

.obraz
szerokość: 100%

.Centrum
Pozycja: absolutna;
Rozmiar czcionki: 20px;
Font-Weight: Bold;
Styl czcionki: Kursywa;
kolor biały;
TOP: 40%;
Po lewej: 40%;

W celu dostosowania tekstu na środkowej pozycji obrazu ustawiliśmy górną właściwość i lewą właściwość na 40%.

Wyjście

Z powodzeniem umieściliśmy tekst na środku obrazu

Prawy górny róg

Zapoznaj się z poniższym kodem, aby zrozumieć, jak umieścić tekst w prawym górnym rogu obrazu.

CSS

.div
Pozycja: względny;
szerokość: 400px;

.obraz
szerokość: 100%

.w prawym górnym rogu
Pozycja: absolutna;
TOP: 2%;
Racja: 10%;
Rozmiar czcionki: 20px;
Font-Weight: Bold;
Styl czcionki: Kursywa;
kolor biały;

Po prostu zrobiliśmy, aby umieścić tekst w prawym górnym rogu, to to, że ustawiliśmy najwyższą właściwość na 2%, a właściwa właściwość na 10%. To nie jest twarda i szybka zasada, dlatego możesz zmienić te wartości zgodnie z pragnieniem.

Wyjście

Tekst został wstawiony w prawym górnym rogu obrazu.

Dolny prawy róg

Ostatnia pozycja, którą zamierzamy zademonstrować, to prawy dolny róg obrazu. Postępuj zgodnie z poniższym kodem.

CSS

.div
Pozycja: względny;
szerokość: 400px;

.obraz
szerokość: 100%

.prawy dolny
Pozycja: absolutna;
Dół: 5%;
Racja: 10%;
Rozmiar czcionki: 20px;
Font-Weight: Bold;
Styl czcionki: Kursywa;
kolor biały;

Jak widać, że reszta kodu jest taka sama jak w poprzednich przykładach z jedyną różnicą, że aby umieścić tekst w prawym dolnym rogu, użyliśmy dolnej właściwości i właściwej właściwości.

Wyjście

Tekst został umieszczony w prawym dolnym rogu.

Wniosek

Aby ustawić tekst nad obrazem, umieść obraz i tekst w pojemniku Div i absolutnie ustaw tekst, tymczasem dając Divowi względną pozycję. Różne pozycje, które możesz umieścić tekst na obrazie, to lewy górny róg, lewy dolny róg, środek, prawy róg i prawy dolny róg. To zadanie można wykonać przy użyciu różnych właściwości CSS. W tym poście wykazaliśmy każdą z tych pozycji wraz z odpowiednimi przykładami.