Innehåll
Med hjälp av CSS-kod kan du skapa en randig bakgrund för en webbsida utan att använda grafik. Denna effekt använder CSS-gradientnivåer med flera färgavbrott, liksom egenskapen i bakgrundsstorlek för att göra gradientvektorns upprepning över skärmen. Det bästa sättet att göra detta är att börja med en solid bakgrundsfärg och göra en av dina genomskinliga ränder för att färgen ska markeras. Användare som besöker din sida med gamla webbläsare kommer att se solid färg.
vägbeskrivning
-
Öppna CSS-stilarkfilen i Anteckningar eller i ett kodredigeringsprogram. Lägg till den här regeln till slutet av filen:
html {höjd: 100%; }
Denna regel gör det möjligt att fylla hela bakgrunden på en webbsida med den gradientremsa som den kommer att skapa.
-
Ange en bakgrundsfärg för din sida i "html {}" för att ge basfärgen för dina ränder och en standard för gamla webbläsare:
html {höjd: 100%; bakgrundsfärg: svart; }
-
Lägg till följande kod till din standard "html {}" för att skapa en horisontell randeffekt:
bakgrundsbild: linjär gradient (transparent 50%, vit 50%);
Det kommer att skapa två färgstörningar, den första är transparent och den andra är vit. Varje färgavbrott tar 50% av gradientutrymmet på skärmen. Justera bredden på remsor genom att ändra procentvärdena.
-
Lägg till ett värde på noll till den första färgbrytningen och separera den med ett kommatecken:
Bakgrundsbild: Linjär gradient (0, transparent 50%, svart 50%);
Detta kommer att placera dina ränder vertikalt, i stället för att placera dem horisontellt.
-
Kopiera egenskapen för bakgrundsbilden och dess värden i en ny rad. Gör detta två gånger, skapa tre linjer med samma kod. Lägg till prefixet "-moz" till den linjära gradienten i en av de dubbla koderna. Lägg till prefixet "-webkit" till den andra dubbla raden:
bakgrundsbild: linjär gradient (0, transparent 50%, vit 50%); bakgrundsbild: -moz-linjär gradient (0, transparent 50%, vit 50%); bakgrundsbild: -webkit-linjär-gradient (0, transparent 50%, vit 50%);
-
Begränsa gradienten till en viss pixel genom att ställa in bakgrundsstorleken i nästa rad i din CSS-kod:
bakgrundsstorlek: 20px;
Ändra antalet pixlar i bakgrundsstorlek för att ändra gradientstorleken. På grund av den konstanta upprepningen av sidbreddgradienten motsvarar varje repetition en uppsättning randar på skärmen.
vägbeskrivning
varning
- Vissa äldre webbläsare stöder inte CSS3-gradienter. När du vill visa ränder för alla typer av webbläsare använder du villkorliga kommentarer för att inkludera ett stilark med ett upprepande diagram.