Video: Web Development - Computer Science for Business Leaders 2016 2024
Med cascading style sheets (CSS) kan du bruke bakgrunn egenskaper til en rekke forskjellige objekter på en nettside, inkludert hele siden, et bestemt lag, et bord, en tabellcelle og jevn tekst.
bakgrunnsfarge: En bakgrunnsfarge kan brukes på de fleste objekter på en side, inkludert tekst, tabeller, tabellceller, lag og en sides kropp med en heksadesimal verdi. Når du spesifiserer heksadesimal farge for en hvilken som helst stil, må du huske å legge til tallsymbolet (#) før hex-verdien, som i # cc9900, for å få de beste nettleservisningsresultatene.
p {bakgrunnsfarge: # 33ff00;}
bakgrunnsbilde: Du kan bruke bilder, for eksempel en bakgrunnsfarge, til bakgrunnen til mange forskjellige objekter på en nettside, inkludert kroppen til en side, tabeller, tabellceller og lag. Du kan kontrollere hvordan bildet fliser (gjentar) ved å bruke gjenta attributten.
. mylayer {bakgrunnsbilde: url (bilder / bil. gif);}
bakgrunnsrepetisjon: Gjentaattributtet forteller en nettleser hvordan bakgrunnsbildet skal gjentas i det området det fyller på. Som standard, og med mindre annet er oppgitt, vil alle bakgrunner flisene vertikalt og horisontalt for å fylle hele bakgrunnsrommet til den stilerte taggen eller objektet.
kropp {bakgrunnsbilde: url (bilder / zigzag. Gif); Bakgrunnsrepetisjon: Gjenta-x;}
Gjenta attributten har fire variabler:
-
Gjenta: Dette alternativet er det samme som standardinnstillingen for bakgrunnsbilder og fliser bakgrunnsbildet både horisontalt og vertikalt.
-
repeat-x: Bruk dette alternativet når du vil at bakgrunnsbildet skal fliser bare langs den horisontale aksen. Hvis ønskelig, bruk den sammen med det horisontale og / eller vertikale bakgrunnsstatusattributtet.
-
repeat-y: Bruk dette alternativet når du vil at bakgrunnsbildet skal fliser bare langs den vertikale aksen. Hvis ønskelig, bruk den sammen med det horisontale og / eller vertikale bakgrunnsstatusattributtet.
-
no-repeat: Denne innstillingen viser bakgrunnsbildet som et enkelt statisk bilde uten å gjenta i begge retninger.
bakgrunnsvedlegg: Denne attributtet refererer til hvordan bakgrunnsbildet samhandler med innholdet over det. Bakgrunnsbildet kan oppføre seg på tre forskjellige måter - rulle, fikse og arve - men ikke alle tre støttes konsekvent av alle nettlesere, så vær sikker på å teste hvilket alternativ du velger i en rekke nettlesere og nettleserversjoner på både Mac og PC plattformer.
kropp {bakgrunnsbilde: url (bilder / biodiesel.gif); bakgrunnsbeslutning: fast; bakgrunnsrepetisjon: gjenta-y;}
Her er en forklaring på de ulike bakgrunnsvedleggsstilene:
-
bla: Dette er standardalternativet for hvordan bakgrunnsbildet er festet til siden, som fungerer det samme om Attributtet er spesifisert eller uspesifisert i CSS. Med dette alternativet ruller bakgrunnsbildet sammen med tekst og andre objekter på siden.
-
fast: Den faste attributtet holder bakgrunnsbildet festet til nettleservinduet mens tekst og andre objekter på siden ruller forbi den.
-
arve: Når du angir dette alternativet, armerer bakgrunnsbildet vedleggsregelen, enten det er rulle eller fikset, fra foreldrebeholderen, som med en tabellcelle inne i et bord.
bakgrunnsposisjon (X): Angi den horisontale bakgrunnsstatusattributtet for å kontrollere hvor i bakgrunnsvinduet bakgrunnsbildet vises og gjentas. Velg venstre, senter eller høyre eller skriv inn noen verdi i px (piksler), pc (picas), pt (poeng), i (tommer), mm (millimeter), cm (cm), em), eller% (prosent).
p {bakgrunnsbilde: url (bilder / resirkulere. Gif); bakgrunnsrepetisjon: gjenta-x; bakgrunnsposisjon: venstre;}
bakgrunnsposisjon (Y): Angi den vertikale bakgrunnsstatusattributtet for å kontrollere hvor bakgrunnsbildet vises og gjentar i nettleservinduet. Velg topp, senter eller bunn eller skriv inn noen verdi i px (piksler), pc (picas), pt (poeng), i (tommer), mm (millimeter), cm (cm), em), eller% (prosent).
p {bakgrunnsbilde: url (bilder / gogreen. Png); bakgrunn-gjenta: gjenta-y; bakgrunnsposisjon: senter;}
Når både horisontale og vertikale bakgrunnsposisjoner skal spesifiseres i CSS, må du liste dem sammen adskilt av et mellomrom:
p {bakgrunnsbilde: url (images / earthsafe. jpg); bakgrunnsrepetisjon: gjenta-x; bakgrunnsposisjon: venstre senter;}
Den horisontale posisjonen går alltid før den vertikale posisjonen når de to er kombinert. Hvis denne bestillingen ikke følges, kan det hende at elementet ikke gjengis riktig, noe som resulterer i uventede visningsproblemer når det vises i forskjellige nettlesere.
