Hvordan Sett tekst på bilder i HTML

February 3

Når du viser en webside, siden du ser ofte består av flere blokker kalt "divs." En div er et HTML-element som gjør at webutviklere å kombinere flere sideelementer i én enhet. For eksempel en webside med et navigasjonsfelt på toppen, en menylinje på venstre og innhold i midten kan bestå av tre unike divs heter "Navbar", "LeftMenu" og "innhold". Bruk div-elementer til å plassere tekst hvor som helst på en webside bilde uten fysisk å trekke teksten på bildet.

Bruksanvisning

1 Åpne Notisblokk og lim inn denne teksten i tomt dokument:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Test URL med Butikkode Query String </ title>

// HEAD Seksjon ->

</ Head>

<Body>

<H2> Denne overskriften legger bildet </ h2>

</ Div>

</ Body>

</ Html>

Denne koden gir en tekst overskrift div blokk plassert inne i et bilde div blokk.

2 Legg dette stilarket koden til <head> -delen av dokumentet:

.picture {

background-image: url (xyz.jpg); background-repeat: no-repeat; height: 300px; width: 400px;

}

.textOverlay {

position: relative; venstre: 100px; top: 200px;

}

</ Style>

"Bildet" klasse definerer et bakgrunnsbilde. Bytt xyz.jpg med navnet på et bilde på harddisken. Bytt 300px og 400px med dimensjoner i piksler i bildet. For eksempel, hvis bildet er 600 piksler høye og 500 piksler bred, vil de høyde og bredde egenskaper se slik ut:

Høyde: 600px; width: 500px;

Den "textOverlay" -klassen definerer tekstegenskaper. Den "relative" verdi forteller nettleseren for å plassere teksten i forhold til sin container. De "venstre" og "topp" egenskaper definerer venstre og øvre kant av teksten. I dette eksempelet, vil nettleseren plassere tekst 100 piksler fra venstre kant av bildet og 200 piksler fra toppen av bildet.

3 Trykk "CTRL + S" for å åpne "Lagre" -vinduet. Naviger til skrivebordet mappen og dobbeltklikk på den for å åpne den. Skriv "test_image_overlay.html" uten anførselstegn i "File Name" tekstboksen og klikk "Lagre". Windows vil lagre filen som et HTML-dokument.

4 Finn filen på skrivebordet og dobbeltklikk på den for å åpne den i nettleseren din. Kontroller at nettleseren plasserer teksten på toppen av bildet.

Hint

Finjustere plasseringen av teksten over bildet ved å endre verdiene av "venstre" og "topp" i stilen delen. Øk "venstre" verdi for å flytte teksten til høyre og redusere "venstre" verdi for å flytte teksten til venstre. Øke "top" verdi for å flytte teksten ned og senke "topp" verdi for å flytte teksten opp. For å finne ut et bilde høyde og bredde ved å høyreklikke på bildefilen i Windows Utforsker, og velg "Properties". Vinduet eiendommer vil vise bildets dimensjoner.