CSS-filtersgenerator

Juster effekter som uskarpt fokus og lysstyrke med glidere, og generer CSS filter-kode mens du forhåndsviser

OppdateringsinformasjonCSS-filtergenerator lagt til, generer ved å justere uskarphet og lysstyrkeSe oppdateringer

Funksjoner

9 typer effekter med glidere

Forhåndsvisning og CSS-kode endres samtidig når du justerer

Prøv med egne bilder

Vis bildet ditt i nettleseren og se effekten

BareOriginalbildet mens du holder nede

Sammenlign før og etter effekten på stedet

Fin justering fra 8 eksempler

Juster startpunktet fra eksempler som sepia eller vintage

Bruk

Velg bilde

Velg bildet ditt med "Velg eget bilde". Hvis du ikke velger noe, kan du prøve med det innebygde eksempelbildet

Juster effekten

Velg eksempel med lignende atmosfære, eller juster effektstyrken med hver glider

Sammenlign før og etter

Hold nede "Sammenlign med originalbildet" for å vise bildet uten effekt

Kopier koden

Kopier filter-linjen til din CSS med "Kopier"-knappen

Brukstilfeller

Lesbarhet av tekst på bakgrunnsfoto

Gjør bakgrunnsbildet litt uskarpt for å gjøre overskriften som ligger over mer lesbar

Enhetlig fargetone på bilder

Gjør bildene på lagside eller galleri enhetlige ved sort-hvitt eller sepia

Bestem verdier for egne bilder

Bruk bildet du faktisk skal bruke for å bestemme verdier for matt eller vintage-stil

Bildetuning for mørk modus

Bestem verdier med redusert lysstyrke og kontrast slik at bildet ikke er for sterkt mot mørk bakgrunn

Grunnleggende kunnskap

filter-funksjoner og enheter

CSS filter-egenskapen er en egenskap som bruker effekter på utseendet til bilder eller elementer, skrevet ved å liste opp funksjoner som blur og sepia atskilt med mellomrom.

px (piksel)：blur-funksjonen er en funksjon som spesifiserer uskarphetsradiusen i px. Når du angir 4px, blandes fargene innenfor en radius på 4 piksler.
% (prosent)：brightness-funksjonen og sepia-funksjonen er funksjoner som spesifiserer effektstyrken i %. For brightness-funksjonen er 100 % den opprinnelige lysstyrken, og 120 % er 20 % lysere.
deg (grader)：hue-rotate-funksjonen er en funksjon som spesifiserer grader for å rotere fargen på fargehjulet i deg. Når du angir 180deg, endres fargen til motsatt kulør.

Hvorfor endres resultatet etter skriveorden

Funksjonene som er opplistet i filter brukes fra venstre til høyre, og neste effekt brukes på resultatet av den forrige effekten, så utseendet kan endres når rekkefølgen endres. Hvis du for eksempel gjør det sort-hvitt først og bruker sepia, blir brunt igjen. Hvis du bruker sepia først og deretter sort-hvitt, forsvinner brunt. I dette verktøyet er brukrekkefølgen fast, men du kan endre rekkefølgen ved å redigere den genererte CSS-koden.

Forskjell fra backdrop-filter

filter og backdrop-filter er egenskaper som kan bruke de samme funksjonene, men målet for bruken av effekten er annerledes.

filter：filter er en egenskap som bruker effekter på utseendet til det angitte elementet selv (bilder, tekst osv.).
backdrop-filter：backdrop-filter er en egenskap som bruker effekter på delen som er synlig bak det angitte elementet, og brukes til uttrykk som frost glass.