De CSS filter eigenschap ziet eruit als een styling snelkoppeling: een regel draait een foto zwart-wit, vervaagt een achtergrond of verwarmt een miniatuur, zonder afbeeldingseditor betrokken Het is dat Het verandert ook hoe de browser positioneert en lagen het element waarop het wordt toegepast, dat is de reden waarom een filter toegevoegd voor een hover effect kan stilletjes breken een dropdown drie componenten weg.
Deze gids behandelt wat elke filterfunctie doet met pixelwaarden, waarom dezelfde functies in een andere volgorde een ander beeld produceren, hoe filters zich gedragen in lay-out en animatie, en waar ze prestaties kosten Het maakt gebruik van de gratis CSS filter generator om de declaraties te bouwen, maar elk voorbeeld is gewoon CSS, kunt u overal plakken.
tl;dr: De CSS
filtereigenschap past grafische effecten zoals onscherpte, helderheid, contrast, grijswaarden, sepia, verzadigd, omgekeerd, tint-roteren en dekking toe op een element en alles wat erin zit, in de volgorde waarin de functies worden geschreven Elke andere waarde dannonecreëert ook een stapelcontext en wordt het bevattende blok voor vaste en absoluut gepositioneerde kinderen, wat de gebruikelijke oorzaak is van " mijn modal zit vast in een kaart" De Toolz CSS-filtergenerator bouwt de declaratie op met schuifregelaars en een live preview, schrijft alleen de functies die u hebt gewijzigd en voert client-side, gratis en zonder aanmelding uit.
Wat is de eigenschap CSS-filter?
De CSS-filtereigenschap past beeldverwerkingseffecten toe op een element voordat het op de pagina wordt getekend Het effect dekt het element's hele weergave: de achtergrond, randen, tekst, afbeeldingen en onderliggende elementen Het is gedefinieerd in de W3C Filtereffecten Module Niveau 1 en ondersteund in alle huidige browsers; de MDN-referentie voor filter geeft een overzicht van compatibiliteitsgegevens.
Een declaratie is een in de ruimte gescheiden lijst van filterfuncties
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
De functies lopen van links naar rechts. Ze nemen allemaal de uitvoer van de vorige als invoer, wat de sleutel is om te begrijpen waarom orde ertoe doet.
Filters wijzigen het afbeeldingsbestand niet De browser past ze elke keer toe als het schildert, zodat het origineel onaangeroerd blijft en u het effect kunt wijzigen of verwijderen met één regel CSS.
Wat doet elke filterfunctie?
Elke functie heeft een identiteitswaarde die het element ongewijzigd laat De Toolz-generator gebruikt dat om de uitvoer kort te houden: elke functie die op zijn identiteitswaarde blijft, wordt weggelaten uit de CSS.
| Functie | Wat het doet | Identity | Generator schuifregelaar bereik |
|---|---|---|---|
blur() |
Gaussiaanse vervaging met de gegeven straal | 0px |
0 tot 20px |
brightness() |
Vermenigvuldigt elk kleurkanaal | 100% |
0 tot 200% |
contrast() |
Duwt kanalen weg van of naar middengrijs | 100% |
0 tot 200% |
saturate() |
Verhoogt of verlaagt de kleurintensiteit | 100% |
0 tot 200% |
grayscale() |
Vermengt zich naar een grijs met gelijke luminantie | 0% |
0 tot 100% |
sepia() |
Vermengt zich naar een warme bruine tint | 0% |
0 tot 100% |
invert() |
Draait elk kanaal naar het tegenovergestelde | 0% |
0 tot 100% |
hue-rotate() |
Draait kleuren rond het kleurenwiel | 0deg |
0 tot 360deg |
opacity() |
Maakt het element transparanter | 100% |
0 tot 100% |
De specificatie staat waarden toe die verder gaan dan sommige van deze bereiken, zoals brightness(300%). De schuifregelaars bestrijken de bereiken die handig zijn voor aanpassingen in fotostijl; u kunt met de hand een grotere waarde in uw CSS typen.
De specificatie definieert ook drop-shadow(), die de generator niet omvat In tegenstelling tot box-shadow, drop-shadow() volgt de zichtbare vorm van transparante afbeeldingen zoals PNG-pictogrammen, in plaats van het element's rechthoekige doos Voor rechthoekige schaduwen, de box shadow guide dekt de flexibelere eigenschap.
Hoe veranderen de kleurenfilters pixelwaarden?
De meeste kleurenfilters zijn eenvoudige rekenkunde op de rode, groene en blauwe kanalen, elk behandeld als een getal van 0 tot 1. de Filtereffecten-specificatie definieert elk als een formule of een 3 bij 3 matrix. Doorgewerkt op een paar kleuren, worden ze voorspelbaar.
helderheid(150%) vermenigvuldigt elk kanaal met 1,5 Een middengrijs van rgb (100, 100, 100) wordt rgb (150, 150, 150) Waarden die voorbij de 255 zouden gaan worden geknipt, daarom spoelt hoge helderheid highlights uit naar puur wit.
contrast(200%) geldt (waarde - 0,5) × 2 + 0,5 voor elk kanaal Een donkergrijs bij 0,25 (ongeveer 64) wordt (0,25 - 0,5) × 2 + 0,5 = 0, zwart Een lichtgrijs bij 0,75 wordt 1,0, wit Alles verspreidt zich weg van het midden.
grijswaarden(100%) vervangt elke pixel door een grijs op basis van luminantie, met gewichten van 0,2126 voor rood, 0,7152 voor groen en 0,0722 voor blauw Zuiver rood, rgb (255, 0, 0), wordt 0,2126 × 255 = ongeveer 54, dus rgb (54, 54, 54) Zuiver groen wordt een veel lichter grijs van ongeveer 182 Daarom houdt een grijswaardenconversie het gevoel dat groen helderder is dan rood.
sepia(100%) mengt kanalen met warmgewogen coëfficiënten Voor rode output is de formule 0.393R + 0.769G + 0.189B. Wit gaat naar binnen als (1, 1, 1) en komt uit als ruw (1.35, 1.20, 0.94), die clipt naar rgb (255, 255, 239): wit wordt een zwakke crème.
Deze cijfers komen van het direct toepassen van de formules specificatie' s Op het scherm, afronding en kleurbeheer kan een resultaat verplaatsen met een eenheid of twee.
Waarom verandert de volgorde van filterfuncties het resultaat?
Filters worden achtereenvolgens toegepast, dus elke functie werkt op de vorige functie' s uitvoer Wanneer een functie informatie verwijdert, zoals grijswaarden verwijderen van kleur, alles wat daarna wordt uitgevoerd heeft minder om mee te werken.
Neem puur blauw, rgb (0, 0, 255), en breng grijswaarden en sepia aan op 100% in beide bestellingen.
filter: grayscale(100%) sepia(100%);
- Grijswaarden eerst: blauw heeft luminantie 0,0722, dus de pixel wordt op elk kanaal een donkergrijs van 0,0722, ongeveer rgb (18, 18, 18).
- Sepia tweede: rood wordt 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, groen wordt 0,0722 × 1,203 = 0,0869, blauw wordt 0,0722 × 0,937 = 0,0677.
- Resultaat: over rgb(25, 22, 17), een zeer donker warm bruin.
filter: sepia(100%) grayscale(100%);
- Eerst sepia: rood wordt 0,189, groen 0,168, blauw 0,131, donkerbruin.
- Grijswaardenseconde: luminantie is 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Resultaat: over rgb(43, 43, 43), een neutraal grijs zonder tint.
Dezelfde twee functies, verschillende volgorde en het ene resultaat is afgezwakt terwijl het andere dat niet is De algemene regel: zet functies voor het verwijderen van kleuren eerst als u wilt dat een latere functie het resultaat tint, en als laatste als u een neutraal eindbeeld wilt.
De generator schrijft functies altijd in één vaste volgorde: onscherpte, helderheid, contrast, verzadiging, grijstinten, sepia, inverteren, tint-roteren, dekking Dus grijswaarden komen altijd vóór sepia, wat de afgezwakte versie geeft Als je een andere volgorde nodig hebt, kopieer dan de CSS en herschik de functies met de hand.
Wat produceren de presets?
De generator opent op de Vintage preset Dit zijn de exacte declaraties die elke preset schrijft
| Voorinstelling | Gegenereerde CSS |
|---|---|
| niet een | filter: none; |
| Grijswaarden | filter: grayscale(100%); |
| Vintage | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Warm | filter: brightness(105%) saturate(140%) sepia(25%); |
| Cool | filter: saturate(120%) hue-rotate(200deg); |
| Dramatisch | filter: brightness(90%) contrast(150%) saturate(120%); |
| Vervaagd | filter: brightness(110%) saturate(80%) opacity(80%); |
| Omkeren | filter: invert(100%); |
| Vervagen | filter: blur(4px); |
Voorinstellingen zijn startpunten Klik op Warm en sleep Blur vervolgens naar 2px, en de uitvoer wordt filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Klik op Geen of Reset en het keert terug naar filter: none;.
De Cool preset is sterker dan de naam doet vermoeden: een 200 graden tint rotatie verplaatst sinaasappels richting blauw en blauw richting oranje Het leest als "cool" op warme foto's en als een zware kleurverschuiving op al het andere.
De preview is een vast voorbeeld van een blauwe, oranje en groene gradiënt met een paar vormen, geen upload, Het laat zien hoe elke functie kleur, contrast en vervaging beweegt, maar test altijd de gekopieerde CSS op je echte afbeelding, omdat een filter dat een gradiënt flatteert er modderig uit kan zien op een huidskleur.
Hoe bouw je een filter met de generator?
- Open de filter CSS generator. Het begint op Vintage.
- Kies een voorinstelling die het dichtst bij de gewenste look ligt, of klik op Geen om vanuit geen filters te starten.
- Sleep de schuifregelaars De preview wordt bijgewerkt terwijl u beweegt, en de gegenereerde CSS-lijn wordt ermee bijgewerkt.
- Klik op CSS kopiëren om het volledige te plaatsen
filter: ...;verklaring op uw klembord. - Plak het op de selector voor uw afbeelding of element en controleer het vervolgens op de echte pagina.
Alleen gewijzigde functies verschijnen in de uitvoer, dus het verplaatsen van Helderheid terug naar precies 100% verwijdert brightness() van de lijn in plaats van weg te gaan brightness(100%) behind.
Waarom breekt een filter vaste en absoluut gepositioneerde elementen?
Omdat elke filter andere dan none maakt het element een bevattende blok voor zijn absoluut en vast gepositioneerde nakomelingen, en creëert een nieuwe stapelcontext De Filtereffecten-specificatie vermeldt beide Dit is geen browserbug; het is hoe de eigenschap wordt gedefinieerd.
In de praktijk levert dat twee klassieke bugs op.
Een vaste modal die niet vaststaat. Normaal gesproken position: fixed plaatst een element ten opzichte van de viewport, Binnenin een gefilterde voorouder wordt het in plaats daarvan ten opzichte van die voorouder geplaatst
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Een dropdown verborgen onder buren. Het gefilterde element wordt zijn eigen stapelcontext, dus een kind met z-index: 1000 kan niet meer boven elementen buiten de kaart uitsteken, Het zit alleen nog maar bovenop binnen de kaart.
De fixes zijn voor beide gelijk Pas het filter toe op een smaller element, zoals de img binnenin de kaart in plaats van de kaart zelf Of render de modal of dropdown buiten het gefilterde element, dat is wat "portal" componenten in UI-frameworks doen De transform eigenschap veroorzaakt hetzelfde containing-block-gedrag, dus de CSS-transformatiegids is handig als je deze bug ontmoet met beide eigenschappen in het spel.
Hoe verhouden filters zich tot achtergrondfilter en dekking?
Verschillende eigenschappen overlappen met filterfuncties, en het kiezen van de juiste vermijdt bijwerkingen.
| Property | Beïnvloedt | Typisch gebruik |
|---|---|---|
filter |
Het element en de inhoud ervan | Foto-effecten, grijswaardenlogo's, vervagen op een afbeelding |
backdrop-filter |
Wat er ook achter het element zit | Berijpte glaspanelen, wazige overlays |
opacity |
Het element en de inhoud ervan | Een element in of uit vervagen |
filter: opacity() |
Het element en de inhoud ervan | Transparantie als onderdeel van een filterketen |
mix-blend-mode |
Hoe het element zich vermengt met wat erachter zit | Kleuroverlays, duotone effecten |
backdrop-filter neemt dezelfde functies als filter, maar past ze toe op de inhoud achter het element, dat is hoe glasmorfismepanelen de pagina eronder vervagen De glassmorfismegenerator bouwt die verklaringen.
Voor het vervagen van een element op zichzelf, gewoon opacity is de duidelijkere keuze. opacity() binnenin een filterketen is handig wanneer u al een filter schrijft en transparantie in dezelfde regel wilt.
Kun je CSS-filters animeren?
Ja. filter is animeerbaar, en een veelgebruikt patroon is een grijswaardenlogo dat bij zweven in kleur verandert:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
De browser interpoleert tussen grayscale(100%) en none omdat none wordt behandeld als de overeenkomende functies op hun identiteitswaarden Interpolatie werkt zuiver wanneer beide staten dezelfde functies in dezelfde volgorde vermelden Als de begin - en eindlijsten in volgorde verschillen, kan het resultaat springen in plaats van soepel animeren, dus schrijf beide toestanden met dezelfde functievolgorde.
Doen CSS-filters de prestaties?
Filters kosten rendering tijd, en vervaging kost het meeste Browsers draaien meestal filters op de GPU, wat de meeste kleurenfilters goedkoop maakt. blur() is anders: het werk groeit met zowel de vervagingsradius als de grootte van het gebied, dus een grote straal op een volledig schermelement, vooral een element dat animeert of achter scrollende inhoud zit, kan frames laten vallen op langzamere apparaten.
Praktische limieten:
- Houd onscherpe stralen klein op grote elementen en vermijd het animeren van de straal zelf.
- Vervaag een kleiner element of een verkleinde afbeelding in plaats van een paginagrote verpakking.
- Voor beweging, animeer
transformenopacity, welke browsers efficiënt omgaan en het filter statisch houden. - Test op een telefoon uit het middensegment, niet alleen op een desktop.
Veelgestelde vragen over specifieke effecten
Een paar effecten komen vaak genoeg naar voren om uit te schrijven.
Zwart-wit afbeelding: filter: grayscale(100%); Waarden onder de 100% laten wat kleur achter, dus grayscale(50%) geeft een gedempte blik.
Gedimde achtergrondafbeelding achter tekst: filter: brightness(60%); op het beeldelement Controleer het tekstcontrast achteraf in plaats van te raden; de kleurcontrastcontrole geeft een WCAG-ratio.
Ruwe donkere modus voor een ingesloten document of diagram: filter: invert(100%) hue-rotate(180deg); Omkeren draait licht en donker, maar verandert ook tinten naar hun tegenpolen; Door de tint 180 graden te draaien, komen de meeste kleuren terug naar hun oorspronkelijke tint. Het is een benadering, en foto's binnenin zien er verkeerd uit, dus sluit ze uit.
Getint zwart en wit: filter: grayscale(100%) sepia(60%); zoals hierboven is doorgewerkt.
De volledige set CSS-builders, inclusief tekstschaduw en transformaties, staat op de CSS tools hub.
Is de generator privé?
Ja. de preview en de CSS worden gegenereerd in uw browser met JavaScript Niets wordt geüpload, er is geen afbeelding om te uploaden in de eerste plaats, en de tool blijft offline werken zodra de pagina is geladen Het kopiëren van de CSS telt mee voor een dagelijkse gebruikslimiet en registreert alleen dat er een kopie is gebeurd.
