Hvordan kan jeg legge inn en tekstboks på toppen av et bilde?

April 21

En av hemmelighetene til å lage elementer vises hvor som helst på en webside er å vite hvordan du skal bruke Cascading Style Sheets effektivt. CSS, for eksempel, har en hendig "bakgrunnsbilde" eiendom som site designere bruker for å legge til fotografiske bakgrunner til websider. Du kan også bruke denne egenskapen til å legge til bakgrunnsbilder til andre sideelementer, for eksempel div containere. Når du trenger å bygge inn en tekstboks på toppen av et bilde, plassere tekstboksen inne i en div, og gi div en "background-image" verdi. Besøkende vil da være i stand til å skrive inn informasjon i tekstboksen selv om et bilde vises bak det.

Bruksanvisning

1 Åpne en av HTML-sider ved hjelp av Notepad eller en HTML-editor.

2 Legg til følgende HTML-kode for å sidens hoveddel:

</ Div>

Dette legger en div til siden. Dette div refererer til en CSS-klasse som heter "container1." Div inneholder en div. Det div refererer til en CSS-klasse som heter "textbox1." Dette div også inneholder en tekstboks.

3 Lim inn denne koden på sidens hodedelen:

.container1 {background-image: URL ( 'xyz.jpg'); background-repeat: no-repeat;

height: 200px; width: 300px;

}

.textbox1 {margin-top: 0px; margin-left: 0px;}

</ Style>

Dette Style Sheet erklæringen definerer "container1" og "textbox1" klasser beskrevet i forrige trinn. Den "container1" klasse har en "background-image" attributt. Det attributt er "URL" verdi "xyz.jpg." Erstatt "xyz.jpg" med navnet på en bildefil på datamaskinen din. Erstatt "200px" med bildets piksel høyde. Erstatt "300px" med bildets pikselbredde.

Legg merke til "textbox1" klassedefinisjon. Den har "margin-top" og "margin-left" attributter. Disse attributtene fortelle nettlesere hvor du vil plassere tekstboksen i forhold til bildets øverste venstre kant. Siden verdien av begge attributter er null i dette eksempelet, vil tekstboksen vises på bildets øvre venstre kant.

4 Lagre siden, og se den i nettleseren din. Nettleseren vil vise tekstboksen øverst i venstre hjørne av bildet.

5 Gå tilbake til HTML-dokumentet i redigeringsprogrammet og finne denne klassen definisjonen:

.textbox1 {margin-top: 0px; margin-left: 0px;}

Slett den linjen og erstatte den med følgende linje:

.textbox1 {margin-top: 40px; margin-left: 50 piksler;}

Dette endrer tekstboksen topp margin til 40 piksler og dens venstre marg til 50 piksler.

6 Lagre siden på nytt, og se den i nettleseren din. Tekstboksen vises i en annen posisjon over bildet. Dens øverste kanten er 40 piksler fra toppen av bildet og 50 piksler fra bildets venstre kant. Merk at du fortsatt kan se tekstboks, selv om det ikke inneholder tekst. Bildet i bakgrunnen påvirker ikke tekstboksen utseende.

Hint

Evnen til å kontrollere teksten boksens topp og venstre marg kan du lage tekstboksen vises på ethvert sted over bildet. Eksperimenter med forskjellige verdier av "margin-top" og "margin-left". Se hvordan endringer i disse verdiene føre tekstboksen for å dukke opp på forskjellige posisjoner over bildet.
Hvis du ikke kjenner pixel høyde og bredde på bildet, finner disse verdiene ved hjelp av Windows Utforsker. Start Windows Utforsker, finn bildefilen, og høyreklikk den for å vise en meny. Klikk på "Properties", og klikk deretter på "Details". Den bildets bredde og høyde dimensjoner vises i denne kategorien.