Jak změnit barvu obrázku v CSS

Zde jsou výsledky tohoto článku:

• filtr Vlastnost
• vrhat stín()
• neprůhlednost()

Začněme!

Změňte barvu obrázku v CSS

Chcete-li změnit barvu obrázku v CSS, nejprve se seznamte s vlastností filtru a jeho funkcemi. Získáte tak lepší porozumění.

filtr CSS Property

K ovládání vizuálního efektu obrazového filtru se používá vlastnost CSS. Vizuální efekty jsou:

• rozmazat
• jas
• barevná úprava
• vrhat stín
• neprůhlednost

Syntaxe vlastnosti filtru

Syntaxe vlastnosti filtru je:

• rozmazat(): slouží k aplikaci efektu rozostření na obrázek.
• vrhat stín(): vytvořit stín nad obrázkem.
• neprůhlednost(): slouží k přidání průhlednosti do obrázku.

Pomocí této vlastnosti filtru můžeme použít více filtrů. Tento článek je o tom, jak změnit barvu obrázku, takže si zde vysvětlíme, jak s ním použít funkce drop-shadow() a opacity().

vrhat stín()

drop-shadow() je vestavěná funkce CSS, která umožňuje nastavit stín na jakýkoli prvek nebo obrázek. Následující parametry se používají ve funkci drop-shadow() ke změně barvy obrázku:

• offset-x: Používá se k přidání horizontálního stínu.
• offset-y: Stíny se přidávají vertikálně pomocí tohoto.
• barva: Tímto parametrem se vybarvují stíny.

Abychom tyto body objasnili, přejděme k syntaxi vrženého stínu:

• offset-x a offset-y mohou být kladné nebo záporné.
• V horizontále se kladná hodnota používá k přidání efektů na pravou stranu a záporná je na levou stranu.
• Ve svislém směru je kladná hodnota pro spodní stranu a záporná pro horní.
• Na místě barvy můžete přiřadit libovolnou barvu, kterou chcete obrázku dát.

neprůhlednost()

opacity() se používá k přidání průhlednosti prvku nebo libovolnému obrázku. Syntaxe opacity() je:

Tady “ číslo “ i s se používá k nastavení úrovně krytí mezi 0,0 až 1,0. Chcete-li, aby byl obrázek plně průhledný, můžete jej nastavit na 0,0.

Abychom objasnili výše uvedené body, přejděme k příkladu.

Jak změnit barvu obrázku v CSS?

V níže uvedeném příkladu nejprve přidáme obrázek pomocí značky :

Před použitím vlastnosti filtru byl výsledek následující:

Chcete-li změnit barvu obrázku, přesuňte se na CSS a aplikujte na něj vlastnost filtru. Pro průhlednost obrázku nastavíme krytí na 0,5. Ve funkci drop-shadow() je hodnota offset-x a offset-y 0, protože chceme změnit pouze barvu obrázku.

Zde je konečný výsledek po implementaci:

Barva obrázku byla úspěšně změněna.

Závěr

K úpravě barvy obrázku se s vlastností filtru používají dvě funkce CSS: opacity() a drop-shadow(). opacity() určuje průhlednost obrázku a drop-shadow() přiřazuje obrázku barvu a stín. Tento zápis vysvětlil metodu změny barvy obrázku pomocí CSS.