CSS filtru ģenerators

Pielāgojiet efektus, piemēram, izplūdi un spilgtumu ar slīdņiem, un ģenerējiet CSS filter kodu priekšskatījuma laikā

JaunumiCSS filtru ģenerators pievienots, ģenerējiet, pielāgojot neskaidrību un spilgtumuSkatīt atjauninājumus

Iezīmes

9 efekti ar slīdņiem

Priekšskatījums un CSS kods mainās vienlaicīgi, vizbīdot slīdni

Izmēģiniet savu attēlu

Parādiet savu attēlu pārlūkprogrammā un pārbaudiet efekta ietekmi

Nospiediet, lai redzētu oriģinālo attēlu

Salīdziniet attēlu pirms un pēc efekta pielietošanas uzreiz

Pielāgojiet no 8 paraugiem

Sāciet no sepia vai vintage parauga un veiciet precīzas pielāgošanas

Kā lietot

Izvēlieties attēlu

Izmantojiet "Izvēlieties savu attēlu", lai norādītu savu attēlu. Ja neizvēlaties, varat izmēģināt iebūvēto paraugattēlu

Pielāgojiet efektus

Izvēlieties paraugu ar līdzīgu iedvesmu vai pielāgojiet efekta intensitāti ar slīdņiem

Salīdziniet pirms un pēc

Nospiediet "Salīdzināt ar oriģinālo attēlu" un nospieziet, lai redzētu attēlu bez efekta

Kopējiet kodu

Nospiediet "Kopēt" pogu, lai pievienotu filter rindu savam CSS

Lietošanas scenāriji

Fona fotoattēla teksta lasāmība

Nedaudz izplūdiet fona fotoattēlu, padarot virsrakstus lasāmākus

Fotoattēlu krāsu tīrības apvienošana

Padariet komandas lapas vai galerijas fotoattēlus vienveidīgus, pārvēršot tos melnbaltā vai sepia tonī

Ciparu noteikšana ar saviem fotoattēliem

Pielietojiet efektu saviem fotoattēliem un nosakiet tumšuma vai vintage efekta vērtības

Attēla pielāgošana tumšajam režīmam

Noteikt spilgtuma un kontrasta vērtības, lai attēls nebūtu pārāk spilgts uz tumšas fona

Pamatjēdzieni

Filter funkcijas un mērvienības

CSS filter īpašība pielieto efektus attēliem vai elementiem, apvienojot funkcijas, piemēram, blur un sepia, atdalītas ar atstarpām.

px (pikseļi)：Blur funkcija nosaka izplūdes rādiusu pikseļos. Norādot 4px, krāsas kļūst viendabīgas 4 pikseļu rādiusa diapazonā.
% (procenti)：Brightness un sepia funkcijas nosaka efekta intensitāti procentos. Brightness funkcijā 100% ir oriģinālais spilgtums, 120% ir par 20% spilgtāks.
deg (grādi)：Hue-rotate funkcija norāda leņķi uz krāsu riteņa. Norādot 180deg, krāsa pārvietojas uz pretējo krāsu.

Kāpēc rezultāts mainās atkarībā no secības

Filter funkcijas tiek pielietotas no kreisās uz labo pusi, un katra nākamā funkcija tiek pielietota iepriekšējā rezultātam. Tādēļ secības maiņa var mainīt rezultātu. Piemēram, melnbaltā funkcija pirms sepia dod brūnumam, bet sepia pirms melnbaltā to noņem. Šajā rīkā pielietošanas secība ir fiksēta, bet jūs varat rediģēt ģenerēto CSS kodu, lai mainītu secību.

Atšķirība starp backdrop-filter

Filter un backdrop-filter izmanto vienādas funkcijas, bet efekti tiek pielietoti dažādiem objektiem.

filter：Filter pielieto efektus paša elementa izskatam (attēli, teksts utt.).
backdrop-filter：Backdrop-filter pielieto efektus elementa aizmugurē redzamajam, ko bieži izmanto matējošim stiklam līdzīgai izskatam.