CSS szűrőgenerátor

Szűrőeffektusokat csúszkákkal állítson be, és tekintse meg előnézetben a CSS filter kódot

FrissítésekCSS-szűrőgenerátor hozzáadva, olvasztás és fényerő beállításával hozható létreFrissítések megtekintése

Funkciók

9 effektus csúszkákkal

Az előnézet és a CSS kód egyszerre változik a mozgatáskor

Próbálja ki saját képével

Megjelenítheti a saját képét a böngészőben, és ellenőrizheti az effektusokat

Az eredeti képet csak nyomva tartva

Az effektus előtti és utáni képet azonnal össze lehet hasonlítani

8 minta alapján finomhangol

Szépiacímű vagy vintage stílusú mintákból indulva beállítható

Használati útmutató

Válasszon képet

A "Saját kép kiválasztása" lehetőséggel adja meg a képet. Ha nem választ, használhatja a beépített mintaképet

Az effektusok beállítása

Válassza ki a hasonló hangulatú mintát, vagy állítsa be az effektus erősségét csúszkákkal

Az előtti és utáni összehasonlítása

Az "Eredeti képpel való összehasonlítás" nyomva tartásakor az effektus nélküli képet jelenítse meg

A kód másolása

A "Másolás" gombbal másolja a filter egy sorát a saját CSS-be

Felhasználási esetek

Háttérkép szövegolvashatósága

Homályosítsa a háttérképet, hogy a fölötte elhelyezett fejléc könnyebben olvasható legyen

Fotók színtónusának egységesítése

Az csapatoldal vagy galéria fotóit fekete-fehérre vagy szépára állítsa

A saját fotóval történő számértékek meghatározása

A tényleges fotóra alkalmazza, hogy meghatározza az elmosódás vagy vintage stílus értékeit

Sötét mód képbeállítása

Állítsa be a fényerő és kontraszt értékeit úgy, hogy a sötét háttér mellett ne legyen túl fényes

Alapismeretek

Filter függvények és egységek

A CSS filter tulajdonság az elemek vagy képek megjelenésére alkalmaz effektusokat, és a blur vagy sepia függvényeket szóközökkel elválasztva írja be.

px (pixel)：A blur függvény a homályosítás sugarát px-ben adja meg, 4px értéknél 4 pixel sugarú tartományban a színek összekeverednek.
% (százalék)：A brightness és sepia függvények az effektus erősségét %-ban adják meg, a brightness függvénynél 100% az eredeti fényerő, 120% pedig 20%-kal világosabb.
deg (fok)：A hue-rotate függvény a szín forgási szögét adja meg a szín körén, 180deg értéknél a szín az ellenkező oldalra mozdul.

Miért változik az eredmény a sorrendtől?

A filter függvényei balról jobbra alkalmazódnak, és az előző effektus eredménye alapján kerül alkalmazásra a következő, így a sorrend megváltoztatása megváltoztathatja a megjelenést. Például ha fekete-fehérre állítunk, majd szepiát alkalmazunk, a barna árnyalat megmarad, de ha szepiát alkalmazunk, majd fekete-fehérre, a barna árnyalat eltűnik. Ebben az eszközben az alkalmazási sorrend rögzített, de a generált CSS kód szerkesztésével megváltoztathatja a sorrendet.

A backdrop-filter különbsége

A filter és a backdrop-filter ugyanazokat a függvényeket használhatja, de az effektus által érintett terület eltérő.

filter：A filter az adott elemnek (kép, szöveg stb.) magának a megjelenésére alkalmaz effektusokat.
backdrop-filter：A backdrop-filter az adott elem mögött látható részre alkalmaz effektusokat, és homályos üveghez hasonló hatáshoz használható.