CSS-suodatinten generaattori

Säädä sumennus- ja kirkkausvaikutuksia liukusäätimillä ja luo CSS filter -koodia esikatselemalla

PäivityksetCSS-suodatimen luonti: säädä sumennusta ja kirkkauttaNäytä päivitykset

Ominaisuudet

9 vaikutusta liukusäätimillä

Esikatselu ja CSS-koodi muuttuvat jokaisen liukusäätimen liikkeen myötä

Testaa omillasi kuvilla

Näytä paikallinen kuva selaimessa ja tarkista vaikutukset

Pidä painiketta nähdäksesi alkuperäisen

Vertaa vaikutuksen ennen ja jälkeen paikalleen

Hienosäädä 8 näytteen perusteella

Aloita seepian tai vintage-näytteestä ja hienosäädä

Käyttöohje

Valitse kuva

Valitse oma kuva kohdasta "Valitse oma kuva". Jos et valitse mitään, voit testata sisäänrakennetuilla näytekuvilla.

Säädä vaikutuksia

Valitse lähellä olevaa tunnelmaa näytteestä tai säädä jokaisen liukusäätimen vaikutuksen voimakkuutta

Vertaa ennen ja jälkeen

Paina "Vertaa alkuperäiseen" nähdäksesi kuvan ilman vaikutusta

Kopioi koodi

Kopioi filter-rivi "Kopioi"-painikkeella omaan CSS-tiedostoosi

Käyttötapaukset

Tekstin luettavuus taustakuvassa

Sumenna taustakuva hieman, jotta otsikko on paremmin luettavissa

Valokuvien värisävy yhtenäisesti

Tee tiimin sivun tai gallerian kuvat yhtenäisiksi mustavalkoiksi tai seepian värillä

Arvojen määrittäminen omilla kuvilla

Testaa todellisella kuvalla ja määritä värinpääläisyyden tai vintage-vaikutuksen arvot

Kuvan säätö dark mode -tilaa varten

Pienennä kirkkaus ja kontrasti, jotta kuva ei häikäise pimeällä taustalla

Perustiedot

Filter-funktiot ja yksiköt

CSS filter -ominaisuus levittää vaikutuksia kuviin tai elementteihin käyttäen funktioita kuten blur ja sepia, jotka erotetaan välilyönnillä.

px (pikseli)：Blur-funktio määrittää sumennussäteen pikseleinä. Kun määrität 4px, värit sekoittuvat 4 pikselin säteellä.
% (prosentti)：Brightness- ja sepia-funktiot määrittävät vaikutuksen voimakkuuden prosentteina. Brightness-funktiossa 100 % on alkuperäinen kirkkaus ja 120 % on 20 % kirkkaampi.
deg (aste)：Hue-rotate-funktio määrittää värinsävy-pyörällä pyörityksen asteen. 180 deg pyöristää värin vastakkaiselle puolelle.

Miksi järjestys vaikuttaa tulokseen

Filter-funktiot käytetään vasemmalta oikealle, ja jokainen seuraava vaikutus kohdistuu edellisen tulokseen. Järjestyksen muutos voi muuttaa ulkoasua. Esimerkiksi mustavalkeaksi muuntaminen ja sitten sepia jättää ruskeaa väriä, kun taas sepia ensin ja sitten mustavalkoinen poistaa ruskeuden. Tämän työkalun käyttöjärjestys on kiinteä, mutta voit muuttaa järjestystä muokkaamalla luotua CSS-koodia.

Ero backdrop-filteriin

Filter ja backdrop-filter käyttävät samoja funktioita, mutta kohdistuvat eri asioihin.

filter：Filter levittää vaikutuksia määritettyyn elementtiin itseensä (kuva, teksti jne.).
backdrop-filter：Backdrop-filter levittää vaikutuksia elementin taakse näkyvään osaan, sitä käytetään sumean lasin kaltaisen vaikutuksen luomiseen.