Hvordan Lay Tekst over bildene på en webside

March 6

Ved hjelp av Cascading Style Sheets (CSS), kan du plassere bilder og tekst der du vil ha på web-sider. En CSS eiendom - z-index - gjør det mulig å selv endre rekkefølgen på elementene på en webside, slik at teksten kan gå over et bilde. Posisjonering bilder og tekst ved hjelp av CSS tar litt praksis, men mer erfarne programmerere kan lage kompliserte og vakre design ved å utnytte alle CSS tilbud.

Bruksanvisning

Rediger HTML-koden

1 Åpne opp en web-side i en kode editor som Notepad ++, jEdit eller BBEdit. Finn <img> -taggen i forbindelse med bildet du ønsker å legge tekst over. Den <img> -taggen vil se slik ut:

<Img />

2 Legg til en ny linje over <img> -taggen og deretter legge til en innledende <div> tag. Legg til en ny linje under <img> -taggen og skriv inn den avsluttende </ div> tag. I åpnings <div> tag, sett "ID" attributt til en unik og meningsfullt navn. Din resulterer koden vil se omtrent slik ut:

<Img />

</ Div>

3 Legg en blank linje under <img> -taggen og skriver i åpning og lukking <div> tagger igjen. Skriv inn tekst mellom disse kodene. Gi <div> på begynnelsen av teksten en "ID" attributt med en unik og meningsfullt navn. Her er et eksempel på den resulterende kode:

<Img />

<Div id = "image-text"> Her er teksten til å gå over bildet. </ Div>

</ Div>

Legg Noen CSS-koden

4 Åpne din CSS fil hvis nettsiden bruker det. Hvis websiden din ikke bruker en CSS-fil, eller hvis du ikke er sikker, og bla deretter opp til <head> taggene og legge <style> og </ style> koder. Plassere noen CSS-koden enten i CSS-filen eller mellom <style> koder.

5 Skriv inn følgende CSS-kode:

wrapper {position: relative; } Wrapper img {position: absolute; } Bilde-tekst {position: absolute; }

Koden ovenfor setter posisjonering typer på pakke <div> tagger samt bilde og tekst mellom dem. Ved å sette wrapper <div> for å bruke relative posisjonering, kan vi bruke absolutt posisjonering på sine nestede tags uten bilde og tekst går helt til topps hjørne på nettsiden. Du kan i stedet plassere dem inne i innpakningen <div>.

6 Tilsett z-index eiendom til bilde og tekst. Denne egenskapen avgjør stablingsrekkefølgen av HTML-elementer. Elements gitt de høyeste tallene vises først på siden, og elementer gitt lavere z-indekstallene gå under dem.

wrapper img {position: absolute; z-index: 0; } Bilde-tekst {position: absolute; z-index: 1; }

Koden ovenfor setter teksten over bildet. Unngå å bruke negative tall for z-index eller bruker svært store tall.

7 Styr den nøyaktige plasseringen av absolutt plasserte elementer - i dette tilfellet, bilde og tekst - ved hjelp av "top" og "venstre" CSS egenskaper. De eksakte tallene som brukes vil avhenge av størrelsen på bildet ditt og hvordan du vil at teksten skal vises. Her er et eksempel på tekst plassert over øverste venstre hjørne av bildet:

wrapper img {position: absolute; top: 0px; venstre: 0px; z-index: 0; } Bilde-tekst {position: absolute; top: 0px; venstre: 0px; z-index: 1; }

Hint

Lær CSS boksen modellen innvendig og utvendig. Dette vil hjelpe deg å få en bedre forståelse av CSS posisjonering.
Test din webside i Internet Explorer 8 og under hvis du er bekymret for hvordan websidene dine vil se ut for brukere av eldre IE nettlesere. Internet Explorer 6 til 8 inneholder mange CSS-relaterte bugs.