Hoe maak je een gestreepte achtergrond met CSS

Inhoud

• routebeschrijving
• routebeschrijving
• waarschuwing

Met CSS-code kunt u een gestreepte achtergrond voor een webpagina genereren zonder afbeeldingen te gebruiken. Dit effect gebruikt CSS-gradiëntniveaus met meerdere kleuronderbrekingen, evenals de eigenschap op de achtergrondgrootte om de gradiëntvector over het scherm te laten herhalen. De beste manier om dit te doen is om te beginnen met een effen achtergrondkleur en een van uw transparante strepen te maken voor de kleur die moet worden gemarkeerd. Gebruikers die uw pagina bezoeken met behulp van oude internetbrowser, krijgen een effen kleur te zien.

routebeschrijving

Met CSS kun je een gestreepte achtergrond genereren voor een hele webpagina zonder afbeeldingen te gebruiken (Jack Hollingsworth / Photodisc / Getty Images)

routebeschrijving

1. Open het CSS-stijlbladbestand in Kladblok of in een codebewerkingsprogramma. Voeg deze regel toe aan het einde van het bestand:

   html {height: 100%; }

   Deze regel maakt het mogelijk om de volledige achtergrond van een webpagina te vullen met de verloopstreep die wordt gemaakt.

2. Stel een achtergrondkleur in voor uw pagina in "html {}" om de basiskleur voor uw strepen op te geven en een standaard voor oude browsers:

   html {height: 100%; achtergrondkleur: zwart; }

3. Voeg de volgende code toe aan uw standaard "html {}" om een ​​horizontaal streepeffect te maken:

   
   

   achtergrondafbeelding: lineair verloop (transparant 50%, wit 50%);

   Er worden twee kleurpauzes gemaakt, de eerste is transparant en de tweede is wit. Elke kleuronderbreking neemt 50% van de gradiëntruimte op het scherm in beslag. Pas de breedte van de stroken aan door de percentagewaarden te wijzigen.

4. Voeg een waarde van nul toe aan de eerste kleurenpauze en scheid deze met een komma:

   Achtergrondafbeelding: lineair verloop (0, transparant 50%, zwart 50%);

   Hierdoor worden uw strepen verticaal geplaatst in plaats van ze horizontaal te plaatsen.

5. Dupliceer de eigenschap van de achtergrondafbeelding en de waarden ervan in een nieuwe regel. Doe dit twee keer, maak drie regels met dezelfde code. Voeg het voorvoegsel "-moz" toe aan het lineaire verloop in een van de dubbele coderegels. Voeg het voorvoegsel "-webkit" toe aan de andere dubbele regel:

   achtergrondafbeelding: lineair verloop (0, transparant 50%, wit 50%); achtergrondafbeelding: -moz-lineair verloop (0, transparant 50%, wit 50%); achtergrondafbeelding: -webkit-lineair verloop (0, transparant 50%, wit 50%);

   
   

6. Beperk het verloop tot een bepaald aantal pixels door de achtergrondgrootte in de volgende regel in uw CSS-code in te stellen:

   achtergrondgrootte: 20 px;

   Wijzig het aantal pixels op de achtergrondgrootte om de kleurovergang te wijzigen. Vanwege de constante herhaling van de paginadikte verloop, komt elke herhaling overeen met een reeks strepen op het scherm.

waarschuwing

• Sommige oudere browsers ondersteunen geen CSS3-gradiënten. Als u strepen wilt weergeven voor alle typen browsers, gebruikt u voorwaardelijke opmerkingen om een ​​stijlpagina met een herhalend diagram op te nemen.