Hvordan plassere tekst over et bilde?

Ofte ønsker nettutviklere å plassere litt tekst over et bilde for å vise litt informasjon om det aktuelle bildet. Dette kan også spille en viktig rolle i å gjøre nettstedet ditt eller bildet mer attraktivt, og dermed forbedre sjansen for å fange brukerens oppmerksomhet. Nå er det forskjellige posisjoner der du kan legge til teksten din på et bilde som følger.

1. Øverst til venstre hjørne
2. Nederst til venstre hjørne
3. Senter
4. Øverst til høyre hjørne
5. Nederst til høyre hjørne

Nedenfor har vi demonstrert hver av disse stillingene.

Plasser tekst over et bilde

Først av alt vil vi legge til et bilde på vår webside ved hjelp av HTML.

Html

Noe tekst

I koden ovenfor har vi laget et DIV -element og nestet et bilde og et annet DIV -element. Den første diven, som allerede nevnt, holder bildet og den andre diven. I mellomtiden har den andre div container plasseringen og stilen til teksten som skal plasseres på bildet.

Produksjon

Et bilde er satt inn på websiden.

Øverst til venstre hjørne

Den første plasseringen av teksten der vi skal sette er øverste venstre hjørne av bildet. Bruk følgende kodebit.

CSS

.IMG-Container
Posisjon: relativ;
Bredde: 400px;

.bilde
Bredde: 100%

.øverst til venstre
Posisjon: Absolutt;
Font-størrelse: 20px;
Fontvekt: fet;
Font-stil: kursiv;
Farge: Hvit;
Topp: 15px;
Venstre: 30px;

Posisjonen til det første divelementet er satt til relativt slik at vi absolutt kan plassere det andre divelementet. Teksten som skal plasseres på bildet har fått en viss størrelse, vekt, stil og farge, i mellomtiden for å plassere den øverst på venstre hjørne har vi brukt topp- og venstre egenskap.

Produksjon

Teksten ble plassert i øverste venstre hjørne.

Nederst til venstre hjørne

For å legge til en tekst nederst til venstre i bildet, bruk koden nevnt nedenfor.

CSS

.div
Posisjon: relativ;
Bredde: 400px;

.bilde
Bredde: 100%

.nede til venstre
Posisjon: Absolutt;
Font-størrelse: 20px;
Fontvekt: fet;
Font-stil: kursiv;
Farge: Hvit;
Bunn: 3%;
Venstre: 8%;

Resten av koden er imidlertid den samme for å plassere teksten nederst til venstre hjørne vi har satt bunnegenskapen til 3%, og venstre eiendom til 8%. Du kan endre verdiene til disse egenskapene for å forstå hvordan disse fungerer.

Produksjon

Teksten ble plassert nederst i venstre hjørne med stor letthet.

Senter

Tilsvarende, for å plassere teksten din i midtposisjonen, bør du vurdere det nedenfor-nevnte eksemplet.

CSS

.div
Posisjon: relativ;
Bredde: 400px;

.bilde
Bredde: 100%

.senter
Posisjon: Absolutt;
Font-størrelse: 20px;
Fontvekt: fet;
Font-stil: kursiv;
Farge: Hvit;
Topp: 40%;
Venstre: 40%;

For å justere teksten på midtposisjonen til bildet har vi satt den øverste eiendommen og forlatt eiendom til 40%.

Produksjon

Vi har plassert teksten i midten av bildet

Øverst til høyre hjørne

Kontakt koden nedenfor for å forstå hvordan du plasserer tekst øverst til høyre i bildet.

CSS

.div
Posisjon: relativ;
Bredde: 400px;

.bilde
Bredde: 100%

.øverst til høyre
Posisjon: Absolutt;
Topp: 2%;
Til høyre: 10%;
Font-størrelse: 20px;
Fontvekt: fet;
Font-stil: kursiv;
Farge: Hvit;

Det vi ganske enkelt har gjort for å plassere teksten øverst til høyre er at vi har satt toppegenskapen til 2%, og høyre eiendom til 10%. Dette er ikke en hard og rask regel, derfor kan du endre disse verdiene i henhold til ditt ønske.

Produksjon

Teksten ble satt inn i øverste høyre hjørne av bildet.

Nederst til høyre hjørne

Siste posisjon som vi skal demonstrere er nedre høyre hjørne av bildet. Følg koden nedenfor.

CSS

.div
Posisjon: relativ;
Bredde: 400px;

.bilde
Bredde: 100%

.Nede til høyre
Posisjon: Absolutt;
Bunn: 5%;
Til høyre: 10%;
Font-størrelse: 20px;
Fontvekt: fet;
Font-stil: kursiv;
Farge: Hvit;

Som du kan se at resten av koden er den samme som i tidligere eksempler med bare forskjell at for å plassere teksten nederst til høyre har vi brukt den nederste egenskapen og riktig eiendom.

Produksjon

Teksten ble plassert nederst til høyre hjørne.

Konklusjon

For å plassere teksten din over et bilde, plasser bildet og teksten din i en DIV -beholder og plasser absolutt teksten, i mellomtiden gi div en relativ posisjon. Ulike posisjoner som du kan plassere teksten din over et bilde, er øverste venstre hjørne, nederst til venstre, midt, øverst til høyre og nederst til høyre hjørne. Denne oppgaven kan utføres ved hjelp av forskjellige CSS -egenskaper. I dette innlegget har vi demonstrert hver av disse stillingene sammen med passende eksempler.