Hvordan lage bilder Unscrollable med HTML

Hvordan lage bilder Unscrollable med HTML


De fleste nettsider har bakgrunnsbilder som flytter vertikalt når du klikker på nettleserens rullefeltet. Alle elementer på en side bla som standard. Ved hjelp av Cascading Style Sheets, eller CSS, kan du endre denne standardvirkemåten og gjøre noen bakgrunnsbilde unscrollable. Dette skaper en spennende "flytende" effekt. Besøkende bla gjennom en slik side se innholdet flytte, men bakgrunnsbildet fortsatt fast på et bestemt sted.

Bruksanvisning

1 Start Notepad og åpne en av HTML-dokumenter. Velg et dokument som er lang nok til å rulle. Ideelt sett vil dette være en webside som inneholder mye tekst.

2 Legg til følgende CSS-kode blokk til "hodet" -delen av dokumentet:

<Style type = "text / css">

kropp

{

background-image: URL ( "someImage.jpg"); background-attachment: fixed;

background-repeat: no-repeat; background-posisjon: center center;

}

</ Style>

3 Erstatt "someImage.jpg" med navnet på en av bildene dine. For eksempel, hvis du ønsker å bruke et bilde som heter "defrag.gif" er i "Tools" mappe på "C" -stasjonen, gjøre koden blokken ser ut som dette:

<Style type = "text / css">

kropp

{

background-image: URL ( "C: \ Tools \ defrag.gif"); background-attachment: fixed;

background-repeat: no-repeat; background-posisjon: center center;

}

</ Style>

Hvis bildet er på nettet, bruke bildets URL i stedet. Bakgrunnen-vedlegg eiendom avgjør om bilde ruller. Det ruller ikke hvis du setter verdien til "faste" som vist ovenfor. Den "no-repeat" verdi forteller leseren til å ikke gjenta bilde for å skape en flis effekt. Bakgrunnen-posisjon eiendom kan du angi bildets horisontale og vertikale koordinater. I dette tilfellet, er de begge "center". Dette fører til at nettleseren til å midtstille bildet på websiden.

4 Lagre HTML-dokumentet. Åpne den i nettleseren din og bla gjennom websiden. Bildet vil ikke flytte.

Hint

  • Å tillate bildet for å bla, endre bakgrunns-vedlegget verdi fra "fast" til "bla". Andre mulige posisjonering verdier for background-posisjon hotellet inkluderer "topp", "bunn", "venstre" og "høyre". For eksempel, hvis du vil at bildet skal ligge fast i øvre høyre del av websiden, endre bakgrunns-stilling verdi fra "center center" - som vist i dette eksemplet - til "høyre" (uten anførselstegn). Man kan også bruke pikselverdiene for de horisontale og vertikale koordinater. I stedet for å bruke "øverst til høyre" eller "center center", du kan bruke 200px 400px i stedet. Dette vil fikse bildet 200 piksler fra sidens venstre kant og 400 piksler fra toppen av siden.