Jak zmienić kolor obrazu w CSS

Połączenie funkcji krycia () i drop-shadow () w właściwości filtra zmieni kolor obrazu w CSS. Właściwość filtra może być używana do zastosowania różnych efektów do obrazu, takich jak odbicia, skala szarości, sepia, cienie i inne. Te funkcje używają różnych elementów kolorów do modyfikacji koloru obrazu. W tym podręczniku zdobędziesz wiedzę o tym, jak używać CSS do zmiany koloru obrazu.

Oto wyniki tego artykułu:

• Właściwość filtrująca
• Drop-Shadow ()
• nieprzezroczystość()

Zaczynajmy!

Zmień kolor obrazu w CSS

Aby zmienić kolor obrazu w CSS, najpierw dowiedz się o właściwości filtra i jej funkcjach. Lepiej zrozumiesz w ten sposób.

Filtr właściwość CSS

Aby kontrolować efekt wizualny właściwości filtra obrazu CSS. Efekty wizualne to:

• plama
• jasność
• Regulacja kolorów
• Drop-Shadow
• nieprzezroczystość

Składnia właściwości filtra

Składnia właściwości filtra to:

Filtr: Blur () | Drop-Shadow () | nieprzezroczystość()

• plama(): Służy do zastosowania efektu rozmycia na obraz.
• Drop-Shadow (): Utwórz cień na obrazie.
• nieprzezroczystość(): Służy do dodania przezroczystości do obrazu.

Możemy użyć wielu filtrów za pomocą tej właściwości filtra. Ten artykuł dotyczy sposobu zmiany koloru obrazu, więc tutaj wyjaśnimy, jak używać funkcji Drop-Shadow () i kryzys ().

Drop-Shadow ()

Drop-Shadow () to wbudowana funkcja CSS, która umożliwia ustawienie cienia na dowolny element lub obraz. Poniższe parametry są używane w funkcji Drop-Shadow (), aby zmienić kolor obrazu:

• Offset-X: Służy do dodawania poziomego cienia.
• Offset-y: Cienie są dodawane pionowo za pomocą tego.
• kolor: Cienie są zabarwione tym parametrem.

Aby wyjaśnić te punkty, przejdźmy do składni Drop-Shadow:

Drop-Shadow (offset-X offset-y)

• offset-x i offset-y mogą być pozytywne lub ujemne.
• W poziomie wartość dodatnia stosuje się do dodania efektów po prawej stronie, a ujemny jest dla lewej strony.
• W pionie wartość dodatnia jest dla dolnej strony, a ujemność jest dla góry.
• W miejscu koloru możesz przypisać dowolny kolor, który chcesz podać obrazowi.

nieprzezroczystość()

krycia () służy do dodania przezroczystości do elementu lub dowolnego obrazu. Składnia krycia () to:

nieprzezroczystość (liczba);

Tutaj "numer" Is Służy do ustawienia poziomu krycia między 0.0 do 1.0. Aby obraz był w pełni przezroczysty, możesz ustawić go jako 0.0.

Aby wyjaśnić powyższe punkty, przejdźmy do przykładu.

Jak zmienić kolor obrazu w CSS?

W poniższym przykładzie najpierw dodamy obraz za pomocą znacznika:

Przed zastosowaniem właściwości filtra wynik był taki:

Aby zmienić kolor obrazu, przejdźmy do CSS i zastosujmy właściwość filtra do niego. Ustawimy krycie na 0.5 dla przezroczystości obrazu. W funkcji Drop-Shadow () wartość przesunięcia-X i przesunięcia-Y wynosi 0, ponieważ chcemy tylko zmienić kolor obrazu.

.obraz
Filtr: krycie (0.5) Drop-Shadow (0 0 Brown);

Oto końcowy wynik po wdrożeniu:

Kolor obrazu został pomyślnie zmieniony.

Wniosek

Aby zmodyfikować kolor obrazu, z właściwością filtra używane są dwie funkcje CSS: krytera kryta () i drop-shadow (). IncAcity () określa przezroczystość obrazu i drop-shadow () przypisuje kolor i cień do obrazu. Ten zapis wyjaśnił metodę zmiany koloru obrazu za pomocą CSS.