Sådan laver du en stribet baggrund med CSS

Indhold

• retninger
• retninger
• advarsel

Ved hjælp af CSS-kode kan du generere en stribet baggrund for en webside uden at bruge grafik. Denne effekt bruger CSS-gradientniveauer med flere farveskader, såvel som egenskaben bagstørrelse til at gøre gradientvektoren gentaget på tværs af skærmen. Den bedste måde at gøre dette på er at starte med en solid baggrundsfarve og lave en af ​​dine gennemsigtige striber for at markere farven. Brugere, der besøger din side ved hjælp af gamle internetbrowsere, vil se solid farve.

retninger

CSS giver dig mulighed for at generere en stribet baggrund for en hel webside uden at bruge grafik (Jack Hollingsworth / Photodisc / Getty Images)

retninger

1. Åbn CSS stilarkfilen i Notesblok eller i et koderedigeringsprogram. Tilføj denne regel til slutningen af ​​filen:

   html {højde: 100%; }

   Denne regel gør det muligt at udfylde hele baggrunden på en webside med den gradientstrimmel, den vil oprette.

2. Angiv en baggrundsfarve til din side inden for "html {}" for at give basisfarven til dine striber og en standard for gamle browsere:

   html {højde: 100%; baggrundsfarve: sort; }

3. Tilføj følgende kode til din standard "html {}" for at oprette en vandret stribeeffekt:

   baggrundsbilde: lineær gradient (gennemsigtig 50%, hvid 50%);

   
   

   Det vil skabe to farvelukker, den første er gennemsigtig og den anden er hvid. Hver farveafbrydelse tager 50% af gradientrummet på skærmen. Juster bredden af ​​strimlerne ved at ændre procentværdierne.

4. Tilføj en værdi på nul til den første farvepause og adskilles med et komma:

   Baggrundsbilde: lineær gradient (0, gennemsigtig 50%, sort 50%);

   Dette vil placere dine striber lodret i stedet for at placere dem vandret.

5. Duplikerer baggrundsbilledegenskaben og dens værdier i en ny linje. Gør dette to gange, og opret tre linjer med samme kode. Tilføj præfiks "-moz" til den lineære gradient i en af ​​de dobbelte linjer af kode. Tilføj "-webkit" prefikset til den anden dublet linje:

   baggrundsbilde: lineær gradient (0, gennemsigtig 50%, hvid 50%); baggrundsbilde: -moz-lineær gradient (0, gennemsigtig 50%, hvid 50%); baggrundsbillede: -webkit-lineær gradient (0, gennemsigtig 50%, hvid 50%);

   
   

6. Begræns gradienten til en vis pixel ved at indstille baggrundsstørrelsen i den næste linje i din CSS-kode:

   baggrundsstørrelse: 20px;

   Ændre antallet af pixel i baggrundsstørrelsen for at ændre gradientstørrelsen. På grund af den konstante gentagelse af sidebreddegradienten svarer hver gentagelse til et sæt striber på skærmen.

advarsel

• Nogle ældre browsere understøtter ikke CSS3-gradienter. Når du vil vise striber til alle typer browsere, skal du bruge betingede kommentarer til at inkludere et stilark med et gentagende diagram.