Jak zmienić kolor obrazu w CSS

Oto wyniki tego artykułu:

• filtr Właściwość
• cień ()
• nieprzezroczystość()

Zaczynajmy!

Zmień kolor obrazu w CSS

Aby zmienić kolor obrazu w CSS, najpierw zapoznaj się z właściwością filter i jej funkcjami. W ten sposób zyskasz lepsze zrozumienie.

filtruj właściwość CSS

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

• plama
• jasność
• regulacja koloru
• cień
• nieprzezroczystość

Składnia właściwości filtra

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

• plama(): służy do zastosowania efektu rozmycia na obrazie.
• drop-cień(): utworzyć cień na obrazie.
• nieprzezroczystość(): służy do dodawania przezroczystości do obrazu.

Korzystając z tej właściwości filtra, możemy użyć wielu filtrów. Ten artykuł dotyczy zmiany koloru obrazu, więc tutaj wyjaśnimy, jak używać z nim funkcji drop-shadow() i opacity().

cień ()

drop-shadow() to wbudowana funkcja CSS, która umożliwia ustawienie cienia dla dowolnego elementu lub obrazu. Następujące parametry są używane w funkcji drop-shadow() do zmiany koloru obrazu:

• przesunięcie-x: Służy do dodawania cienia poziomego.
• przesunięcie-y: Cienie są dodawane w pionie za pomocą tego.
• kolor: Tym parametrem kolorowane są cienie.

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

• offset-x i offset-y mogą być dodatnie lub ujemne.
• W poziomie, dodatnia wartość służy do dodawania efektów po prawej stronie, a ujemna po lewej stronie.
• W pionie wartość dodatnia dotyczy dolnej strony, a ujemna górnej.
• W miejsce koloru możesz przypisać dowolny kolor, który chcesz nadać obrazowi.

nieprzezroczystość()

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

Tutaj “ numer ” i służy do ustawiania poziomu krycia w zakresie od 0,0 do 1,0. Aby obraz był w pełni przezroczysty, możesz ustawić go na 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ą tagu :

Przed zastosowaniem właściwości filtra wynik wyglądał następująco:

Aby zmienić kolor obrazu, przejdźmy do CSS i zastosujmy do niego właściwość filter. Ustawimy krycie na 0.5 dla przezroczystości obrazu. W funkcji drop-shadow() wartość offset-x i offset-y wynosi 0, ponieważ chcemy tylko zmienić kolor obrazu.

Oto efekt końcowy po wdrożeniu:

Kolor obrazu został pomyślnie zmieniony.

Wniosek

Aby zmodyfikować kolor obrazu, wraz z właściwością filter używane są dwie funkcje CSS: opacity() i drop-shadow(). opacity() określa przezroczystość obrazu, a drop-shadow() przypisuje kolor i cień do obrazu. W tym artykule wyjaśniono metodę zmiany koloru obrazu za pomocą CSS.