Kuidas muuta pildi värvi CSS-is

Siin on selle artikli tulemused:

• filtri omadus
• vari ()
• läbipaistmatus ()

Alustame!

Muutke CSS-is pildi värvi

Pildi värvi muutmiseks CSS-is tutvuge esmalt filtri atribuudi ja selle funktsioonidega. Nii saate parema arusaamise.

filtri CSS-i atribuut

Pildifiltri visuaalse efekti juhtimiseks kasutatakse CSS-i atribuuti. Visuaalsed efektid on:

• hägusus
• heledus
• värvi reguleerimine
• vari-vari
• läbipaistmatus

Filtri atribuudi süntaks

Filtri atribuudi süntaks on:

• hägu(): kasutatakse pildile hägususe efekti rakendamiseks.
• vari (): luua pildile vari.
• läbipaistmatus (): kasutatakse pildile läbipaistvuse lisamiseks.

Selle filtri atribuudi abil saame kasutada mitut filtrit. See artikkel räägib pildi värvi muutmisest, seega selgitame siin, kuidas kasutada koos sellega funktsioone drop-shadow() ja opacity().

vari ()

drop-shadow() on CSS-i sisseehitatud funktsioon, mis võimaldab seada varju mis tahes elemendile või pildile. Funktsioonis drop-shadow() kasutatakse pildi värvi muutmiseks järgmisi parameetreid:

• nihe-x: Seda kasutatakse horisontaalse varju lisamiseks.
• offset-y: Selle abil lisatakse varjud vertikaalselt.
• värv: Selle parameetriga värvitakse varjud.

Nende punktide selgitamiseks liigume varjude süntaksi juurde:

• nihe-x ja nihe-y võivad olla positiivsed või negatiivsed.
• Horisontaalses režiimis kasutatakse positiivset väärtust, et lisada efektid paremal küljel ja negatiivset vasakul küljel.
• Vertikaalselt on positiivne väärtus alumise külje jaoks ja negatiivne ülemise külje jaoks.
• Värvi asemel saate määrata mis tahes värvi, mida soovite pildile anda.

läbipaistmatus ()

opacity() kasutatakse elemendi või pildi läbipaistvuse lisamiseks. Opacity() süntaks on:

Siin “ number ” i s kasutatakse läbipaistmatuse taseme määramiseks vahemikus 0,0 kuni 1,0. Pildi täiesti läbipaistvaks muutmiseks saate määrata selle väärtuseks 0,0.

Eespool mainitud punktide selgitamiseks liigume näite juurde.

Kuidas muuta pildi värvi CSS-is?

Allolevas näites lisame esmalt pildi, kasutades sildi :

Enne filtri atribuudi rakendamist oli tulemus järgmine:

Pildi värvi muutmiseks liigume CSS-i ja rakendame sellele filtri atribuuti. Pildi läbipaistvuse tagamiseks määrame läbipaistmatuse väärtuseks 0,5. Funktsioonis drop-shadow() on offset-x ja offset-y väärtus 0, sest me tahame muuta ainult pildi värvi.

Siin on lõpptulemus pärast rakendamist:

Pildi värvi muutmine õnnestus.

Järeldus

Pildi värvi muutmiseks kasutatakse filtri atribuudiga kahte CSS-i funktsiooni: opacity() ja drop-shadow(). opacity() määrab pildi läbipaistvuse ja drop-shadow() määrab pildile värvi ja varju. See kirjutis selgitas pildi värvi muutmise meetodit CSS-i abil.