Ako zmeniť farbu obrázka v CSS

Tu sú výsledky tohto článku:

• filter Vlastnosť
• Vrhať tieň()
• nepriehľadnosť()

Začnime!

Zmeňte farbu obrázka v CSS

Ak chcete zmeniť farbu obrázka v CSS, najprv sa zoznámte s vlastnosťou filtra a jej funkciami. Takto získate lepšie pochopenie.

filter CSS Property

Na ovládanie vizuálneho efektu filtra obrázkov sa používa vlastnosť CSS. Vizuálne efekty sú:

• rozmazať
• jas
• úprava farieb
• Vrhať tieň
• nepriehľadnosť

Syntax vlastnosti filtra

Syntax vlastnosti filtra je:

• rozmazať(): používa sa na aplikáciu efektu rozmazania na obrázok.
• Vrhať tieň(): vytvoriť tieň nad obrázkom.
• nepriehľadnosť(): používa sa na pridanie priehľadnosti do obrázka.

Pomocou tejto vlastnosti filtra môžeme použiť viacero filtrov. Tento článok je o tom, ako zmeniť farbu obrázka, takže si tu vysvetlíme, ako s ním použiť funkcie drop-shadow() a opacity().

Vrhať tieň()

drop-shadow() je vstavaná funkcia CSS, ktorá umožňuje nastaviť tieň na akýkoľvek prvok alebo obrázok. Nasledujúce parametre sa používajú vo funkcii drop-shadow() na zmenu farby obrázka:

• offset-x: Používa sa na pridanie horizontálneho tieňa.
• offset-y: Pomocou toho sa pridávajú vertikálne tiene.
• farba: Tiene sú zafarbené týmto parametrom.

Aby sme tieto body objasnili, prejdime k syntaxi drop-shadow:

• offset-x a offset-y môžu byť kladné alebo záporné.
• V horizontálnom prípade sa kladná hodnota používa na pridanie efektov na pravú stranu a záporná hodnota na ľavú stranu.
• Vo vertikále je kladná hodnota pre spodnú stranu a záporná pre hornú stranu.
• Na mieste farby môžete obrázku priradiť akúkoľvek farbu, ktorú chcete.

nepriehľadnosť()

opacity() sa používa na pridanie priehľadnosti do prvku alebo akéhokoľvek obrázka. Syntax opacity() je:

Tu “ číslo “ i s sa používa na nastavenie úrovne nepriehľadnosti medzi 0,0 až 1,0. Ak chcete, aby bol obrázok úplne priehľadný, môžete ho nastaviť na hodnotu 0,0.

Aby sme objasnili vyššie uvedené body, prejdime na príklad.

Ako zmeniť farbu obrázka v CSS?

V nižšie uvedenom príklade najprv pridáme obrázok pomocou značky :

Pred použitím vlastnosti filtra bol výsledok takýto:

Ak chcete zmeniť farbu obrázka, presuňte sa na CSS a aplikujte naň vlastnosť filtra. Pre priehľadnosť obrázku nastavíme krytie na 0,5. Vo funkcii drop-shadow() je hodnota offset-x a offset-y 0, pretože chceme zmeniť iba farbu obrázka.

Tu je konečný výsledok po implementácii:

Farba obrázka bola úspešne zmenená.

Záver

Na úpravu farby obrázka sa s vlastnosťou filter používajú dve funkcie CSS: opacity() a drop-shadow(). opacity() určuje priehľadnosť obrázku a drop-shadow() priraďuje obrázku farbu a tieň. Tento zápis vysvetlil spôsob zmeny farby obrázka pomocou CSS.