Kako spremeniti barvo slike v CSS

Tu so rezultati tega članka:

• Lastnost filtra
• padajoča senca()
• motnost ()

Začnimo!

Spremenite barvo slike v CSS

Če želite spremeniti barvo slike v CSS, najprej spoznajte lastnost filtra in njegove funkcije. Tako boste bolje razumeli.

filter Lastnost CSS

Za nadzor vizualnega učinka slikovnega filtra se uporablja lastnost CSS. Vizualni učinki so:

• zamegljenost
• svetlost
• prilagoditev barv
• padajoča senca
• nepreglednost

Sintaksa lastnosti filtra

Sintaksa lastnosti filtra je:

• zameglitev(): uporablja se za uporabo učinka zameglitve na sliki.
• padajoča senca (): ustvarite senco nad sliko.
• motnost(): uporablja se za dodajanje prosojnosti sliki.

S to lastnostjo filtra lahko uporabimo več filtrov. Ta članek govori o tem, kako spremeniti barvo slike, zato bomo tukaj razložili, kako z njo uporabiti funkciji drop-shadow() in opacity().

padajoča senca()

drop-shadow() je vgrajena funkcija CSS, ki omogoča nastavitev sence kateremu koli elementu ali sliki. Za spreminjanje barve slike se v funkciji drop-shadow() uporabljajo naslednji parametri:

• odmik-x: Uporablja se za dodajanje vodoravne sence.
• offset-y: S tem se sence dodajo navpično.
• barva: S tem parametrom se obarvajo sence.

Da bi razjasnili te točke, pojdimo k sintaksi padajoče sence:

• offset-x in offset-y sta lahko pozitivna ali negativna.
• V vodoravnem se pozitivna vrednost uporablja za dodajanje učinkov na desni strani, negativna pa za levo stran.
• V navpični smeri je pozitivna vrednost spodnja stran, negativna pa zgornja.
• Namesto barve lahko dodelite katero koli barvo, ki jo želite dati sliki.

motnost ()

opacity() se uporablja za dodajanje prosojnosti elementu ali kateri koli sliki. Sintaksa opacity() je:

Tukaj “ število ” jaz s se uporablja za nastavitev stopnje motnosti med 0,0 in 1,0. Če želite narediti sliko popolnoma pregledno, jo lahko nastavite na 0,0.

Da bi pojasnili zgornje točke, pojdimo na primer.

Kako spremeniti barvo slike v CSS?

V spodnjem primeru bomo najprej dodali sliko z oznako :

Pred uporabo lastnosti filtra je bil rezultat tak:

Če želite spremeniti barvo slike, se premaknimo na CSS in zanj uporabimo lastnost filtra. Za prosojnost slike bomo nastavili motnost na 0,5. V funkciji drop-shadow() je vrednost offset-x in offset-y 0, ker želimo spremeniti samo barvo slike.

Tukaj je končni rezultat po izvedbi:

Barva slike je bila uspešno spremenjena.

Zaključek

Za spreminjanje barve slike se z lastnostjo filtra uporabljata dve funkciji CSS: opacity() in drop-shadow(). opacity() določa prosojnost slike, drop-shadow() pa sliki dodeli barvo in senco. Ta zapis je razložil način spreminjanja barve slike s pomočjo CSS.