„„filtr„Własność można zastosować do zastosowania różnych efektów wizualnych do obrazu, takiego jak odbicie, skala szarości, sepia, nasycenie, rotacja odcienia i wiele innych. Połączenie powiązanych funkcji wymienionych efektów wizualnych we właściwości filtra zmieni kolor obrazu. Te funkcje używają różnych elementów kolorów do modyfikacji koloru obrazu.

W tym podręczniku nauczysz się, jak używać CSS, aby zmienić kolor obrazu na niebieski.

Jak zmienić kolor obrazu w CSS?

W CSS możesz użyć właściwości filtra do zastosowania dowolnego efektu graficznego do obrazu lub w celu przesunięcia kolorów na element HTML. Ponadto można go użyć do zmiany koloru obrazu. Najpierw przejdź przez właściwość filtra i jej funkcje.

Właściwość Filtr CSS

Aby kontrolować efekt wizualny obrazu, zostanie zastosowana właściwość filtra CSS. Jego obsługiwane efekty wizualne to:

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

Składnia

Naszym celem jest zmiana koloru obrazu na niebieski w CSS za pomocą właściwości filtra. Aby to zrobić, będziemy postępować zgodnie z podaną składnią:

Filtr: sepia () | hue-rrotate () | nasycić()

Opis powyższych funkcji to:

• • sepia(): Służy do konwersji obrazu na obraz sepii, nadając mu brązowo -żółty wygląd.
  • hue-rrotate (): Służy do zastosowania obrotu odcienia do obrazu. Ta funkcja akceptuje wymagany kąt rotacji jako argument.
  • nasycić(): Jest wykorzystywany do ustawienia nasycenia na obrazie. Ta funkcja akceptuje procent lub liczbę jako argument reprezentujący kwotę konwersji.

Aby wyjaśnić wyżej wymienione punkty, przejdźmy do przykładu.

Sprawdźmy przykład, aby zmienić kolor obrazu na niebieski za pomocą wspomnianych funkcji właściwości filtra.

Przykład: Jak zmienić kolor obrazu na niebieski w CSS?

Aby zmienić kolor obrazu na niebieski, najpierw określ źródło wybranego obrazu w pliku HTML.

Tutaj dodaliśmy obraz za pomocą znacznika i ustawiliśmy jego szerokość na „450px”:

Zmień kolor obrazu na niebieski

Przed zastosowaniem właściwości filtra nasza strona internetowa będzie wyglądać tak:

Przejdź do CSS i zastosuj właściwość filtra, aby zmienić kolor obrazu na niebieski.

Aby to zrobić, ustawimy wartość sepia (), hue-rrotate () i saturuj () funkcjonuje jako „100%”,„190 stopnie" I "900%”Odpowiednio:

img
Filtr: Sepia (100%) Hue-Rotate (190DEG) nasycić (900%);

Notatka: Sekwencja dodanych funkcji musi być taka sama jak podana. W przypadku zmiany określonej sekwencji, obraz nie przyjmie wymaganego efektu.

Teraz zapisz kod i otwórz plik HTML w przeglądarce:

Przykład 2: Jak zmienić kolor obrazu na jasnoniebieski?

Aby zmienić kolor obrazu na jasnoniebieski, wartości funkcji sepia (), hue-rrotate () i saturuce () zostaną zmienione.

Tutaj dodamy kolejny obraz za pomocą znacznika:

Zmień kolor obrazu na jasnoniebieski

Teraz przejdź do sekcji CSS i zastosuj „filtr„Właściwość do dodanego obrazu.

Tutaj ustawimy wartość sepia () jako „300%”, Hue-rrotate () jako„150 stopni”I SETATATE () jako„450%”:

img
Filtr: Sepia (300%) Rotacji Hue (150DEG) nasyca (450%);

W rezultacie kolor danego obrazu zostanie zmieniony na jasnoniebieski.

Wyjście

Omówiliśmy najprostszą metodę zmiany koloru obrazu na niebieski w CSS.

Wniosek

Aby zmienić kolor obrazu na niebieskisepia()”,„hue-rrotate ()", I "nasycić()”Funkcje„filtr„Własność jest używana. Kolor obrazu zmienia się zgodnie z podaną wartością funkcji sepia (), hue-rrotate () i seculate (). Za pomocą tego możesz ustawić różne kolory obrazu, takie jak niebieski i jasnoniebieski. Jak wyjaśniliśmy w tym artykule, właściwość filtra CSS pozwala zmienić kolor obrazu na niebieski.