CSS-bakgrundsmönster
Verktyg för CSS-bakgrundsmönster
Om CSS Background Pattern
Generera repeterande bakgrundsmönster med ren CSS utan någon bildfil. Välj mellan fem inbyggda mönstertyper — dots, grid, diagonal, zigzag och waves — välj en förgrunds- och bakgrundsfärg, ställ in en rutstorlek, och verktyget genererar exakt de background-image / background-size-deklarationer som krävs för att återskapa mönstret.
Så här använder du
1. Välj ett mönster i listrutan (dots, grid, diagonal, zigzag, waves). 2. Ställ in förgrundsfärgen (linjerna eller prickarna) och bakgrundsfärgen med färgväljarna. 3. Dra Size-reglaget (5–50px) för att ändra avståndet mellan rutorna. 4. Kopiera den genererade CSS:en, som redan innehåller de nödvändiga egenskaperna background-color, background-image och background-size.
Mönstertyper
dots: radial-gradient-prickar på ett rutnät. grid: korsande linear-gradients som bildar ett rutnät. diagonal: repeating-linear-gradient-ränder i 45 grader. zigzag: fyra skiktade linear-gradients som bildar en sicksack-ruta. waves: radial-gradient-bågar upprepade horisontellt. Size styr rutans dimension i pixlar och tillämpas per mönster enligt dokumentationen i källkoden.
▶Är mönstren rasterbilder?
▶Varför ser mitt mönster annorlunda ut efter att jag klistrat in CSS:en?
▶Vad är den maximala rutstorleken?
▶Kan jag använda transparens i färgerna?
Om detta verktyg har varit till hjälp för dig, överväg att bjuda mig på en kaffe.
Bjud mig på en kaffe