CSS Zmień kolor obrazu
Zaimplementujemy kilka przykładów tych funkcji, które właściwość filtra CSS zapewnia w pliku HTML.
Przykład 1: Korzystanie z właściwości filtra z funkcją odwróconą do stylizowania obrazu w pliku HTML
W tym przykładzie użyjemy funkcji odwróconej właściwości filtra, która odwróci wszystkie wartości próbki obrazu. Funkcja odwrócona może zaakceptować wszystkie dodatnie wartości dla stopnia inwersji i tylko wartości ujemne nie są akceptowane. Ta funkcja właściwości filtra może samodzielnie zmienić kolor obrazu.
W tym skrypcie zaczynamy od otwarcia nagłówka pliku, aby utworzyć klasę stylistyczną dla elementu obrazu strony HTML. W stylu pod nazwą „obraz” tworzymy klasę, w której definiujemy właściwość wraz z jej funkcją, która zmienia kolor obrazu. Następnie zamykamy znacznik stylu i nagłówek pliku. Następnie otwieramy znacznik ciała, w którym dajemy nagłówek za pomocą znacznika „H2”. Pierwszym obrazem jest oryginalny kolorowy obraz i nie ma w nim właściwości stylizacji, podczas gdy drugi obraz jest taki sam jak pierwszy, ale z stylem i klasą dodaną do jego tagu. Dodajemy obrazy w pliku za pomocą ścieżki pliku za pomocą słowa kluczowego „SRC”. Po zamknięciu znacznika obrazu kończymy plik, zamykając ciało i znacznik HTML. Zapisujemy plik we właściwym formacie, abyśmy mogli uzyskać do niego dostęp do naszej przeglądarki i otrzymujemy następujące wyniki:
Jak widać na poprzednim wyjściu, obraz po lewej ma wszystkie prawidłowe kolory, podczas gdy obraz po prawej stronie ma odwrócone kolory i został przekształcony w inny obraz.
Przykład 2: Korzystanie z właściwości filtra z funkcją sepia do stylizowania obrazu w pliku HTML
W tym przykładzie używamy funkcji sepii właściwości filtra, aby zmienić wszystkie kolory na zdjęciu na ciepły brązowy lub jasnożółty kolor. Funkcja Sepia akceptuje wszystkie dodatnie wartości stopni konwersji kolorów i odrzuca tylko wartości ujemne. Ta funkcja właściwości filtra może samodzielnie modyfikować kolor obrazu. Wewnątrz stylu pliku HTML utworzymy unikalną klasę stylizacji dla elementu obrazu.
W tym skrypcie zaczynamy od dostępu do nagłówka pliku, aby utworzyć klasę stylu dla elementu obrazu strony HTML. W znaczniku stylu konstruujemy klasę, w której definiujemy właściwość, a także jej metodę, która zmienia kolor obrazu. Tag stylu i nagłówek pliku zostaną zamknięte. Następnie otwieramy znacznik ciała i wstawiamy nagłówek za pomocą znacznika „H2”. Następnie, używając elementu „IMG”, umieszczamy dwa obrazy na naszym ekranie. Pierwszym obrazem jest oryginalny obraz kolorów bez charakterystyki stylu, podczas gdy drugi obraz jest taki sam jak pierwsza, ale z klasą stylistyczną zawartą w tagu. Korzystając z słowa kluczowego „SRC”, wkładamy zdjęcia do pliku przez ścieżkę pliku.
Jak pokazano na poprzednim wyjściu, obraz po lewej ma wszystkie prawidłowe kolory. Jednak ten po prawej ma różne kolory.
Przykład 3: Korzystanie z właściwości filtra z funkcją skali szarości do stylizowania obrazu w pliku HTML
W tym przykładzie wykorzystamy funkcję filtra w skali szarości, aby przekonwertować wszystkie kolory na zdjęciu na czarny, biały i szary. Ta funkcja właściwości filtra może zmienić kolor zdjęcia i przekształca ją w obraz w skali szarościowej. Opracujemy unikalną klasę stylizacji elementu obrazu w stylu tagu pliku HTML.
W tym skrypcie najpierw wpisujemy nagłówek pliku, aby wygenerować klasę stylu dla elementu obrazu strony HTML. Definiujemy właściwość, a także metodę zmiany koloru obrazu w klasie. Tag stylu i nagłówek pliku zostaną zamknięte. Następnie otwieramy znacznik ciała i wstawiamy nagłówek za pomocą znacznika „H2”. Następnie używamy elementu „IMG” do wyświetlania dwóch obrazów na naszym ekranie. Pierwszy obraz nie ma funkcji stylizacji, podczas gdy drugi obraz jest taki sam jak pierwszy, ale z klasą stylistyczną dodaną do tagu. Wkładamy zdjęcia do pliku za pomocą słowa kluczowego „SRC” i ścieżki pliku.
Zdjęcie po lewej zawiera wszystkie oryginalne kolory, jak pokazano w poprzednim wyjściu. Jednak ten po prawej stronie ma wyraźne odcienie.
Przykład 4: Korzystanie z właściwości filtra z funkcjami krycia i upuszczenia cienia, aby stylizować obraz w pliku HTML
W tym przykładzie użyjemy filtrowej funkcji właściwości i upuść funkcje cienia, aby zmienić wszystkie kolory na zdjęciu. Ta funkcja właściwości filtra zmienia kolor zdjęcia i przekształca ją w nowy obraz.
W tym skrypcie najpierw dodajemy nagłówek pliku, aby stworzyć klasę stylu dla elementu obrazu na stronie HTML. Definiujemy właściwość, a także metodę zmiany koloru obrazu w klasie. Tag stylu i nagłówek pliku zostaną zamknięte. Następnie otwieramy znacznik ciała i używamy znacznika „H2”, aby wstawić nagłówek. Element „IMG” jest następnie używany do wyświetlania dwóch obrazów na naszym ekranie. Pierwszy obraz nie ma właściwości stylizacji, podczas gdy drugi obraz jest identyczny z pierwszym, ale z klasą stylistyczną dodaną do tagu. Wkładamy zdjęcia do pliku za pomocą słowa kluczowego „SRC” i ścieżki pliku. Zamykamy elementy ciała i HTML po zamknięciu znacznika obrazu.
Zdjęcie po lewej zawiera wszystkie oryginalne kolory, podczas gdy ten po prawej zmienił tony, jak wskazano w poprzednim wyjściu.
Wniosek
Omówiliśmy kilka metod dotyczących zmiany koloru obrazu w pliku HTML za pomocą CSS. Najczęściej stosowaną właściwością CSS jest właściwość filtra, która ma predefiniowane odrębne funkcje, które mogą zmienić kolor obrazu i może nadać mu transformowany wygląd. Wdrożyliśmy kilka z tych funkcji w środowisku notatnika ++, aby lepiej zrozumieć, jak ta właściwość działa z odrębnymi funkcjami.