🎚️Generator CSS Filter

Funcții și unități filter

Proprietatea CSS filter aplică efecte asupra aspectului imaginilor sau elementelor, cu funcții cum ar fi blur și sepia separate prin spații și scrise pe o singură linie.

• px (pixeli)：Funcția blur specifică raza blur în px; dacă specificați 4px, culorile se estompează pe o rază de 4 pixeli.
• % (procent)：Funcțiile brightness și sepia specifică intensitatea efectului în procente; pentru brightness, 100% este luminozitatea inițială și 120% este o stare 20% mai luminoasă.
• deg (grade)：Funcția hue-rotate specifică unghiul de rotație a culorii pe roata culorilor în grade; dacă specificați 180deg, culoarea se schimbă în culoarea opusă.

De ce rezultatul se schimbă în funcție de ordinea de scriere

Funcțiile din filter se aplică de la stânga la dreapta, iar efectul următor se aplică rezultatului efectului anterior, deci schimbarea ordinii poate schimba aspectul. De exemplu, aplicarea sepiei după alb-negru păstrează o tentă brună, dar aplicarea alb-negru după sepia elimină tentă brună. În acest instrument, ordinea de aplicare este fixă, dar puteți schimba ordinea editând codul CSS generat.

Diferența dintre filter și backdrop-filter

filter și backdrop-filter sunt proprietăți care folosesc aceleași funcții, dar efectul se aplică unor ținte diferite.

• filter：filter este o proprietate care aplică efecte asupra aspectului elementului însuși (imagini, text etc.).
• backdrop-filter：backdrop-filter este o proprietate care aplică efecte asupra părții vizibile în spatele elementului și este folosită pentru efecte de geam mat.