Hvordan lage en stripete bakgrunn med CSS

Innhold

• retninger
• retninger
• advarsel

Ved hjelp av CSS-kode kan du generere en stripet bakgrunn for en nettside uten å bruke grafikk. Denne effekten bruker CSS-gradientnivåer med flere fargepauser, samt egenskapen i bakgrunnsstørrelse for å gjøre gradientvektoren gjenta over skjermen. Den beste måten å gjøre dette på er å starte med en solid bakgrunnsfarge og lage en av dine gjennomsiktige striper for at fargen skal utheves. Brukere som besøker siden din ved hjelp av gamle nettlesere, vil se solid farge.

retninger

CSS lar deg generere en stripet bakgrunn for en hel nettside uten å bruke grafikk (Jack Hollingsworth / Photodisc / Getty Images)

retninger

1. Åpne CSS stilarkfilen i Notisblokk eller i et kodedigeringsprogram. Legg til denne regelen til slutten av filen:

   html {høyde: 100%; }

   Denne regelen gjør det mulig å fylle hele bakgrunnen til en nettside med gradientstreken den vil opprette.

2. Sett en bakgrunnsfarge for siden din i "html {}" for å gi grunnfarge for stripene dine og en standard for gamle nettlesere:

   html {høyde: 100%; bakgrunnsfarge: svart; }

3. Legg til følgende kode i standard "html {}" for å lage en horisontal stripeffekt:

   bakgrunnsbilde: lineær gradient (gjennomsiktig 50%, hvit 50%);

   
   

   Det vil skape to farger, den første er gjennomsiktig og den andre er hvit. Hver fargeavbrudd tar 50% av gradientområdet på skjermen. Juster bredden på strimlene ved å endre prosentverdiene.

4. Legg til en verdi på null til den første fargepausen, og skill den med et komma:

   Bakgrunnsbilde: lineær gradient (0, gjennomsiktig 50%, svart 50%);

   Dette vil plassere stripene dine vertikalt, i stedet for å plassere dem horisontalt.

5. Dupliser bakgrunnsbildeegenskapen og dens verdier i en ny linje. Gjør dette to ganger, og opprett tre linjer med samme kode. Legg til prefixet "-moz" til den lineære gradienten i en av de dupliserte kodelinjene. Legg til prefixet "-webkit" til den andre duplikatlinjen:

   bakgrunnsbilde: lineær gradient (0, gjennomsiktig 50%, hvit 50%); bakgrunnsbilde: -moz-lineær gradient (0, gjennomsiktig 50%, hvit 50%); bakgrunnsbilde: -webkit-lineær gradient (0, gjennomsiktig 50%, hvit 50%);

   
   

6. Begrens gradienten til en viss mengde piksler ved å angi bakgrunnsstørrelsen i neste linje i CSS-koden din:

   bakgrunnsstørrelse: 20px;

   Endre antallet bakgrunner for å endre gradientstørrelsen. På grunn av den konstante gjentakelsen av sidebreddegradienten, vil hver repetisjon tilsvare et sett med striper på skjermen.

advarsel

• Noen eldre nettlesere støtter ikke CSS3-gradienter. Når du vil vise striper for alle typer nettlesere, bruk betingede kommentarer for å inkludere et stilark med et gjentatt diagram.