CSS-filtergenerator

Juster effekter som sløring og lysstyrke med skyderen, og generer CSS filter-kode mens du ser forhåndsvisningen

OpdateringerCSS-filtergenerator tilføjet – juster uskarpheder og lysstyrke for at generereSe opdateringer

Funktioner

9 effekttyper på skyder

Forhåndsvisning og CSS-kode ændres samtidigt, når du bevæger skyderen

Test med dine egne billeder

Vis billederne fra din computer i browseren og kontroller effekten

Se det originale billede kun mens du holder

Sammenlign billeder før og efter effekt på stedet

Finjuster fra 8 prøver

Juster ud fra prøver som sepia-tone eller vintage

Sådan bruges det

Vælg billede

Angiv dit billede ved at klikke på "Vælg dine billeder". Hvis du ikke vælger noget, kan du teste med det indbyggede billede.

Juster effekten

Vælg en tilsvarende stemning fra prøverne, eller juster effektens styrke med hver skyder

Sammenlign før og efter

Klik på "Sammenlign med originalbillede" for at vise billede uden effekt, mens du holder musen nede

Kopier koden

Klik på "Kopier" for at indsætte den ene linie filter-kode i dit eget CSS

Anvendelsesscenarier

Læsbarhed af tekst på baggrundsfoto

Slør baggrundsbilledet lidt, så overskrifterne på toppen bliver lettere at læse

Ensartet billedtone

Gør billeder i teamside eller gallerier ensartet sort-hvide eller sepia

Bestemme værdier med dine egne billeder

Anvend værdier til sløring og vintage-look på dine egne billeder

Billedjustering til mørk tilstand

Bestem værdier for lysstyrke og kontrast reduceret, så billeder ikke blænder på mørk baggrund

Grundlæggende viden

Filter-funktioner og enheder

CSS filter-egenskaben er en egenskab, der anvender effekter på udseendet af billeder og elementer. Den skrives ved at placere funktioner som blur og sepia adskilt af mellemrum.

px (pixel)：blur-funktionen er en funktion, der angiver sløringradius i px. Hvis du angiver 4px, blandes farverne sammen inden for en radius på 4 pixels.
% (procent)：brightness- og sepia-funktioner er funktioner, der angiver effektens styrke i %. For brightness-funktionen betyder 100% den oprindelige lysstyrke, og 120% betyder, at det er 20% lysere.
deg (grader)：hue-rotate-funktionen er en funktion, der angiver den vinkel, i hvilken farven roteres på farvehjulet i deg. Hvis du angiver 180deg, flyttes farven til den modsatte farvetone.

Hvorfor ændrer resultatet sig afhængigt af skriverekkefølgen

Funktionerne i filter anvendes fra venstre mod højre, og næste effekt bruges på resultatet af den forrige effekt. Derfor kan udseendet ændre sig, når rækkefølgen ændres. For eksempel, hvis du anvender sort-hvid før sepia, forbliver brunt, men hvis du anvender sepia før sort-hvid, forsvinder det brune. Dette værktøj har en fast anvendelsesrækkefølge, men du kan ændre rækkefølgen ved at redigere den genererede CSS-kode.

Forskel fra backdrop-filter

filter og backdrop-filter er egenskaber, der kan bruge de samme funktioner, men de target forskellige dele.

filter：filter er en egenskab, der anvender effekter på udseendet af det angivne element (billeder, tekst osv.).
backdrop-filter：backdrop-filter er en egenskab, der anvender effekter på den del, der ses bag det angivne element. Den bruges til at skabe udtryk som frosted glass.