Rulle bakgrunner Med CSS 3
Som standard HTML bakgrunnsbildet du setter i din nettside ruller med resten av innholdet. Hvis du har en annonse eller du ønsker å sette en fast bakgrunn som ruller ikke, må du stille de riktige CSS klasseegenskaper. CSS har flere bakgrunns klasser som lar deg tilpasse bakgrunnsbildet og om bilde ruller med resten av innholdet eller ikke.
typer
Alle nettlesere lar deg sette opp et bakgrunnsbilde med de PNG, JPG eller GIF filtyper. Du har også muligheten til å bruke tekst i bakgrunnen, men programmerere vanligvis bruker bilder for å lage et bakgrunnsbilde rundt hovedwebsideinnhold. Den type bilde du bruker er uviktig, bortsett fra når du vurdere lasting hastigheten for sidene dine. Større bilder tar lengre tid for brukere å laste, så store bilder skape en god brukeropplevelse for brukere med treg Internett-forbindelse.
rulle
Bakgrunnsbildet ruller som standard, slik at du ikke trenger å sette noen spesielle CSS klasser for å få bildene dine til å rulle med resten av siden. Du må sette "repeat" preferanse for å fortelle leseren hvis du ønsker å flis bildet når det ikke dekker hele bredden og høyden på siden din. CSS-klasse "background-repeat" setter flislegging aspektet av bildet. "Repeat-x" gjentar bildet horisontalt. "Repeat-y" gjentar bildet vertikalt. For å stoppe bildet fra å gjenta, bruk "no-repeat" verdi.
Fjern rulling
Hvis du ikke vil at bakgrunnsbildet til å rulle, bruker du "background-attachment" CSS eiendom. Når du setter denne klassen egenskapen til "faste", bildet forblir statisk med siden når brukeren beveger seg. Du bruker denne innstillingen for reklame eller bilder som utvider innholdet på siden. Rullefeltet fortsatt ruller siden innhold, men bildet ikke endres når brukeren beveger seg.
betraktninger
Noen eldre nettlesere som Netscape eller versjoner av Internet Explorer som versjon 6 eller tidligere støtter ikke bakgrunnen rulle effekter. Dette betyr at selv om du stopper bakgrunn fra bla, eldre nettlesere fortsatt bla bakgrunnen uavhengig av CSS innstillinger.