🎚️CSS Filter Generator

Mga function at unit ng filter

Ang CSS filter property ay isang property na nag-apply ng mga epekto sa hitsura ng imahe o elemento, at isinusulat sa pamamagitan ng pagsasama ng mga function tulad ng blur at sepia na pinaghihigpit ng kalahating lapad na puwang.

• px (pixel)：Ang blur function ay isang function na tumutukoy sa radius ng blur sa px. Kung itukoy mo ang 4px, ang mga kulay ay magsasama sa loob ng 4-pixel radius.
• % (porsyento)：Ang brightness at sepia function ay mga function na tumutukoy sa lakas ng epekto sa %. Sa brightness function, 100% ay ang orihinal na brightness, at 120% ay 20% na mas maliwanag.
• deg (degree)：Ang hue-rotate function ay isang function na tumutukoy sa anggulo sa hue circle sa pamamagitan ng deg. Kung itukoy mo ang 180deg, ang kulay ay lilipat sa kabaligtaran na hue.

Bakit nagbabago ang resulta depende sa pagkakasunod-sunod ng pagsusulat

Ang mga function na inayos sa filter ay inilalapat mula kaliwa hanggang kanan, at ang susunod na epekto ay inilalapat sa resulta ng nakaraang epekto. Kaya't ang hitsura ay maaaring magbago kung magbabago ang pagkakasunod-sunod. Halimbawa, kung mag-apply ng sepia pagkatapos ng grayscale, nananatili ang brown tones, ngunit kung mag-apply ng grayscale pagkatapos ng sepia, ang brown tones ay mawawala. Sa tool na ito, nakatakda ang pagkakasunod-sunod ng pag-apply, ngunit maaari mong baguhin ang pagkakasunod-sunod sa pamamagitan ng pag-edit sa nabuong CSS code.

Pagkakaiba ng backdrop-filter

Ang filter at backdrop-filter ay mga property na maaaring gumamit ng parehong mga function, ngunit ang target kung saan inilalapat ang mga epekto ay naiiba.

• filter：Ang filter ay isang property na nag-apply ng mga epekto sa hitsura ng elemento mismo (tulad ng imahe o teksto).
• backdrop-filter：Ang backdrop-filter ay isang property na nag-apply ng mga epekto sa bahagi na nakikita sa likod ng elemento, at ginagamit para sa mga expression na tulad ng frosted glass.