Strona internetowa wykonana jest z dwóch podstawowych języków front-end: HTML i CSS. Wszystkie obiekty strony internetowej utworzone w korpusie HTML są stylizowane przez CSS. Kolor jest podstawową właściwością CSS, która jest stosowana do wszystkich obiektów w tekście lub na obrazie.

Arkusz stylów CSS ma wbudowaną funkcję, która służy do odwrócenia kolorów do zawartości ciała HTML. Ten artykuł będzie zawierał wyjaśnienie dotyczące inwersji kolorów tekstu i obrazu. Podstawową składnią funkcji odwróconej jest:

Odwrócenie (kwota zastosowana do obiektu)

Ten pojedynczy parametr zawiera kwotę w procentach, w jakim stopniu należy wykonać inwersję kolorów. Wartość tej funkcji dla oryginalnego obrazu wynosi 0%. Podczas gdy jeśli wartość funkcji odwróconej wynosi 100%, kolory są odwrócone. Wartość 50% pokazuje, że obraz będzie całkowicie solidny szary kolor, ponieważ wszystkie piksele są pokryte szarym kolorem.

Przykład 1: CSS odwraca kolor tekstu:

W tym przykładzie zobaczymy, w jaki sposób kolory tekstu strony są zmieniane za pomocą funkcji odwróconej. Przed przejściem w kierunku kodów chcielibyśmy wyświetlić oryginalny obraz strony internetowej, na której zastosujemy efekt funkcji odwróconej.

Ta strona internetowa jest po prostu utworzona za pomocą tagów HTML i CSS. Nagłówki

I

, I

to tagi nadwozia HTML, które są odpowiedzialne za te teksty wyświetlane na stronie internetowej. Podczas gdy CSS zawiera stosowany kolor czcionki, ponieważ domyślny kolor czcionki jest zawsze czarny w HTML.

Teraz rozważ prosty kod HTML, który służy do zaprojektowania tej strony. W części ciała nagłówek

jest zadeklarowane. Aby zastosować funkcję odwróconą w tekście, użyliśmy wewnętrznych CSS do stylizacji. Jak znamy wszystkie rodzaje CSS, wewnętrzne CSS są zadeklarowane za pomocą znacznika stylu, wewnątrz głowy kodu HTML. Ta stylizacja odbywa się przy użyciu identyfikatorów i klas w stylu. Te klasy i identyfikatory są dostępne za pośrednictwem ich nazwisk zapisanych wewnątrz znaczników treści HTML.

Na przykład, wewnątrz nagłówka, użyliśmy słowa kluczowego klasy o nazwie klasy, która jest „invert_effect”. Ta klasa jest zadeklarowana w części stylu.

1

… .

Podobny efekt jest stosowany

i akapit.

Następnie zamknij znaczniki ciała HTML. Tag stylu będzie zawierał styl dla obu nagłówków. Ten efekt jest kolor czcionki. Oba nagłówki mają różne kolory.

1 2 3 4 5

H1 Kolor fioletowy;

Podobnie akapit jest również stylizowany przez dodanie do niego koloru czcionki. Następnie zastosowaliśmy efekt do ciała, aby wyświetlić całą zawartość HTML na środku strony internetowej. Wyrównanie jest podawane do całej zawartości części ciała HTML.

Następnie główny efekt jest funkcja odwracania koloru () jest zdefiniowana jako klasa.

1 2 3 4

.invert_effect Filtr: Odwróć (100%);

Klasa jest zadeklarowana z pełnym zatrzymaniem na początku, która jest tożsamością klasy.

Korzystając z tej funkcji, wszystkie kolory tekstu nagłówków i akapitów zostaną zmienione. Wszystkie oryginalne kolory są filtrowane. Pokazane są kolory, które pozostawione są. Wykorzystaliśmy procent odwrócenia jako 100%. Lub wszystkie kolory zostaną dokładnie odwrócone.

Zamknij tag stylu. Następnie zapisz plik tekstowy za pomocą .rozszerzenie HTML, aby otworzyć plik zarówno z notatnikiem w formacie tekstowym, jak i przeglądarce w formie strony internetowej.

Po załadowaniu strony internetowej do przeglądarki zobaczysz, że kolory całego ciała tekstu są zmieniane. Wynika to z odwróconej funkcji stosowanej do tekstu.

Przykład 2: CSS odwraca kolor obrazu:

Po zastosowaniu odwróconego efektu koloru na tekst, zastosujemy ten filtr na obraz. W poprzednim przykładzie w zawartości tekstu HTML używanych było bardzo mało kolorów. Ale teraz użyliśmy obrazu o różnych kolorach, aby zastosować funkcję odwróconego koloru na tym obrazie. Posiadajmy przykładowy obraz JPEG z wielokolorowymi kwiatami. JPEG to format obrazu, który zawiera z nim tło. Poniższy obraz ma białe tło.

Ten obraz zostanie użyty w kodzie do zastosowania funkcji odwróconej. Najpierw rozważ część ciała HTML. Wewnątrz znacznika ciała użyliśmy tego samego nagłówka z obrazem. Obraz jest używany na stronie internetowej, podając źródło obrazu. Lokalizacja to również komputer lub Internet. Użyliśmy pobranego pliku.

1

Tag obrazu zawiera nazwę klasy, aby zastosować na nim efekt odwrócony. Przechodząc w kierunku sekcji CSS, styl nagłówka pozostaje taki sam. Obraz jest stylizowany przez dostarczanie proporcjonalnych wymiarów obrazu, w tym wysokość i szerokość obrazu. Klasa invert_effect będzie miała również tę samą filtrowaną wartość do zastosowania do obrazu.

Zapisz kod i wykonaj plik HTML w przeglądarce. Zobaczysz, że wszystkie kolory pierwotnie obecne na kwiatach są zmieniane. Na kolor tła wpływa również funkcja odwrócona.

W ten sposób filtr funkcji odwróconej jest stosowany do wszystkich kolorów w zwykłym tekście lub na obrazach.

Dodatkowe informacje:

Szary kolor jest odpowiedzialny za inwersję kolorów. Tak więc w przypadku eksperymentu zmniejszyliśmy wartość odwróconą do 38%, aby zobaczyć, jakie będą wyniki.

1 2 3 4

.invert_effect Filtr: Odwróć (38%);

Wyjście ma oryginalny obraz z niejasną warstwą szarawego koloru, który stworzył obraz między oryginalnym i odwróconym warunkiem.

Wniosek:

CSS Odwrotny kolor to funkcja, która zależy od kolorów obiektu HTML. Aby nadać Twojemu obiektowi unikalny zakres kolorów, używamy tej funkcji. Na początku samouczka wyjaśniliśmy tę funkcję, podając jej składnię i parametr. Następnie użyliśmy dwóch podstawowych przykładów do skomplikowania prawidłowego działania funkcji odwróconej w CSS. Ta właściwość jest powiązana z filtrem kolorów, w którym wszystkie kolory są zmieniane, podając określoną kwotę. Zastosowaliśmy efekt filtra zarówno na tekst, jak i obraz, aby zapewnić użytkownikowi najłatwiejszy sposób użycia funkcji odwróconej CSS.