Olùpilẹ̀ṣẹ̀ CSS Filter

Ṣàtúnṣe àwọn ipa bíi blur àti ìmọ́lẹ̀ pẹ̀lú slider, kí o sì wo àwòrán àti àmì CSS filter náà bí o ṣe ń dá a sílẹ̀

Ìsọfúnni ìmúdójúìwọ̀nA ti fi Olupilẹṣẹ Asẹ CSS kun, ṣatunṣe ìbòjú àti ìmọ́lẹ̀ láti ṣe ìpilẹ̀ṣẹ̀Wo Alaye Imudojuiwọn

Àwọn Ànímọ́

Ipa mẹ́sàn-án pẹ̀lú slider

Àwòrán àti àmì CSS máa ń yípadà papọ̀ ní gbogbo ìgbà tí o bá ṣàtúnṣe

Gbìyànjú pẹ̀lú àwòrán tìrẹ

Fi àwòrán tí o ní hàn nínú browser láti wo bí ipa náà ṣe rí

Àwòrán ìpilẹ̀ nígbà tí o ń tẹ̀ mọ́

Fi ojú wéra àwòrán kí ipa náà tó dé àti lẹ́yìn tí ó dé

Ṣàtúnṣe díẹ̀díẹ̀ láti inú àpẹẹrẹ mẹ́jọ

Bẹ̀rẹ̀ láti àpẹẹrẹ bíi sepia tàbí ti ìgbàanì kí o sì ṣàtúnṣe sí i

Bí A Ṣe Ń Lò Ó

Yan àwòrán

Lo "Yan àwòrán tìrẹ" láti yan àwòrán tí o ní. Tí o kò bá yan ọ̀kan, o lè gbìyànjú pẹ̀lú àwòrán àpẹẹrẹ tí ó wà nínú ohun èlò náà

Ṣàtúnṣe ipa náà

Yan àpẹẹrẹ tí ó sún mọ́ ẹ̀wà tí o fẹ́, tàbí lo àwọn slider láti ṣàtúnṣe bí ipa náà ṣe lágbára tó

Fi ojú wéra ṣáájú àti lẹ́yìn

Tẹ̀ mọ́ "Fi wéra pẹ̀lú àwòrán ìpilẹ̀" láti wo àwòrán láì sí ipa kankan nígbà tí o ń tẹ̀

Kọ́pì àmì náà

Lo bọ́tìnnì "Kọ́pì" láti fi ìlà filter kan sínú CSS tìrẹ

Àwọn Ìlò

Kíkà ọ̀rọ̀ lórí àwòrán ẹ̀yìn

Dá blur kéékèèké sí àwòrán ẹ̀yìn kí àkọlé tí ó wà lókè rẹ̀ lè yéni sí i

Ìṣọ̀kan àwọ̀ àwòrán

Jẹ́ kí àwọn àwòrán nínú ojú ìwé ẹgbẹ́ tàbí gallery jẹ́ aláwọ̀ dúdú-àti-funfun tàbí sepia bákan náà

Ṣíṣe ìpinnu iye pẹ̀lú àwòrán gidi

Lo lórí àwòrán tí a máa lò ní gidi láti pinnu iye fún ìrísí àìmọ́ tàbí ti ìgbàanì

Ṣàtúnṣe àwòrán fún dark mode

Pinnu iye ìmọ́lẹ̀ àti contrast tí a dín kù kí àwòrán má bàa mọ́lẹ̀ jù lórí ẹ̀yìn dúdú

Ìmọ̀ Ìpìlẹ̀

Àwọn iṣẹ́ àti ìwọ̀n filter

Ohun-ini filter ti CSS ń fi ipa kan sórí ìrísí àwòrán tàbí ẹ̀yà kan, a sì máa ń kọ àwọn iṣẹ́ bíi blur àti sepia ní ọ̀rọ̀ mẹ́rin pẹ̀lú àlàfo láàrín wọn.

px (pixel)：Iṣẹ́ blur ń lo px láti ṣe àpèjúwe rediusi ìbóra, bí a bá yan 4px, àwọ̀ yóò dàpọ̀ láàrín rediusi tí ó jẹ́ 4 pixel.
% (ìdá-ọgọ́rùn-ún)：Àwọn iṣẹ́ bíi brightness àti sepia ń lo % láti ṣàpèjúwe bí ipa náà ṣe lágbára tó; fún brightness, 100% túmọ̀ sí ìmọ́lẹ̀ ìpilẹ̀, 120% sì túmọ̀ sí ìmọ́lẹ̀ tí ó pọ̀ sí i ní ìdá mẹ́wàá.
deg (ìwọ̀n)：Iṣẹ́ hue-rotate ń lo deg láti ṣàpèjúwe igun tí a fi ń yí àwọ̀ ká lórí àyíká àwọ̀, bí a bá yan 180deg, àwọ̀ náà yóò yí padà sí àwọ̀ tí ó jìnnà sí i.

Kí nìdí tí ìlọ́sẹ̀ ìkọ̀wé fi ń yí àbájáde padà

Àwọn iṣẹ́ tí a tò sínú filter ni a máa ń lò láti òsì sí ọ̀tún, ipa tí ó tẹ̀lé ẹ̀ máa ń ṣiṣẹ́ sórí àbájáde ipa tí ó ṣáájú, nítorí náà bí ìlọ́sẹ̀ ìtòlẹ́sẹẹsẹ̀ bá yí padà, ìrísí tó máa yọ jáde lè yí padà pẹ̀lú. Fún àpẹẹrẹ, bí a bá kọ́kọ́ sọ ọ́ di aláwọ̀ dúdú-àti-funfun kí a tó fi sepia sí i, àwọ̀ bràúnù yóò ṣì wà; ṣùgbọ́n bí a bá kọ́kọ́ fi sepia sí i kí a tó sọ ọ́ di aláwọ̀ dúdú-àti-funfun, àwọ̀ bràúnù náà yóò parẹ́. Nínú ohun èlò yìí, ìtòlẹ́sẹẹsẹ̀ ìlò ti wà ní ìdásílẹ̀, ṣùgbọ́n o lè yí ìlọ́sẹ̀ náà padà nípa títún àmì CSS tí a dá sílẹ̀ ṣe.

Ìyàtọ̀ sí backdrop-filter

filter àti backdrop-filter jẹ́ ohun-ini méjì tí ó lè lo àwọn iṣẹ́ kan náà, ṣùgbọ́n ohun tí ipa náà ń kàn yàtọ̀.

filter：filter jẹ́ ohun-ini tí ó ń fi ipa sórí ìrísí ẹ̀yà tí a yàn fúnra rẹ̀ (bíi àwòrán tàbí ọ̀rọ̀).
backdrop-filter：backdrop-filter jẹ́ ohun-ini tí ó ń fi ipa sórí ohun tí ó wà lẹ́yìn ẹ̀yà tí a yàn, a sì máa ń lò ó láti ṣe ìrísí bíi dígí tí a fi gíláàsì àláwọ̀rí ṣe.