Kako promijeniti boju slike u CSS-u

Ovo su rezultati ovog članka:

• filter Svojstvo
• padajuća sjena()
• neprozirnost()

Počnimo!

Promjena boje slike u CSS-u

Da biste promijenili boju slike u CSS-u, prvo naučite o svojstvu filtra i njegovim funkcijama. Na ovaj način ćete bolje razumjeti.

filter CSS svojstvo

Za kontrolu vizualnog učinka CSS-a koristi se svojstvo filtra slike. Vizualni efekti su:

• zamutiti
• svjetlina
• podešavanje boje
• padajuća sjena
• neprozirnost

Sintaksa svojstva filtera

Sintaksa svojstva filtera je:

• zamutiti(): koristi se za primjenu efekta zamućenja na sliku.
• drop-shadow(): stvoriti sjenu preko slike.
• neprozirnost(): koristi se za dodavanje prozirnosti slici.

Pomoću ovog svojstva filtra možemo koristiti više filtara. Ovaj članak govori o tome kako promijeniti boju slike, pa ćemo ovdje objasniti kako s njom koristiti funkcije drop-shadow() i opacity().

padajuća sjena()

drop-shadow() je ugrađena funkcija CSS-a koja omogućuje postavljanje sjene na bilo koji element ili sliku. Sljedeći parametri koriste se u funkciji drop-shadow() za promjenu boje slike:

• pomak-x: Koristi se za dodavanje horizontalne sjene.
• pomak-y: Pomoću ovoga se okomito dodaju sjene.
• boja: Ovim parametrom se boje sjene.

Kako bismo razjasnili ove točke, prijeđimo na sintaksu padajuće sjene:

• offset-x i offset-y mogu biti pozitivni ili negativni.
• U horizontalnoj, pozitivna vrijednost se koristi za dodavanje efekata na desnoj strani, a negativna je za lijevu stranu.
• U okomitom, pozitivna vrijednost je za donju stranu, a negativna za gornju.
• Na mjestu boje možete dodijeliti bilo koju boju koju želite dati slici.

neprozirnost()

opacity() se koristi za dodavanje prozirnosti elementu ili bilo kojoj slici. Sintaksa opacity() je:

Ovdje “ broj ” ja s koristi se za postavljanje razine neprozirnosti između 0,0 i 1,0. Da bi slika bila potpuno prozirna, možete je postaviti na 0.0.

Kako bismo pojasnili gore navedene točke, prijeđimo na primjer.

Kako promijeniti boju slike u CSS-u?

U primjeru u nastavku, prvo ćemo dodati sliku pomoću oznake:

Prije primjene svojstva filtra, rezultat je bio ovakav:

Da biste promijenili boju slike, prijeđimo na CSS i na njega primijenimo svojstvo filtra. Postavit ćemo neprozirnost na 0,5 za prozirnost slike. U funkciji drop-shadow(), vrijednost offset-x i offset-y je 0 jer samo želimo promijeniti boju slike.

Evo konačnog rezultata nakon implementacije:

Boja slike je uspješno promijenjena.

Zaključak

Za izmjenu boje slike, dvije CSS funkcije: opacity() i drop-shadow() koriste se sa svojstvom filtera. opacity() određuje prozirnost slike, a drop-shadow() dodjeljuje boju i sjenu slici. Ovaj zapis objašnjava metodu mijenjanja boje slike pomoću CSS-a.