Obrazy w skali szarości składają się z czarnego, szarego i białego koloru. Mówiąc dokładniej, szary kolor ma wiele poziomów odcieni. W HTML użytkownicy mogą przekonwertować obraz w skalę szarości za pomocą CSS ”filtr" nieruchomość. Właściwość filtra jest używana głównie do definiowania i ustawiania efektu wizualnego obrazu, takiego jak renderowanie obrazów, tła i granic.

W tym samouczku pokażemy, jak przekonwertować obraz na skalę szarości w HTML/CSS

Jak przekonwertować obraz na skalę szarości w HTML/CSS?

Aby przekonwertować obraz na skalę szarości w HTML/CSS, postępuj zgodnie z podanymi instrukcjami.

Krok 1: Dodaj kontener DIV

Najpierw dodaj kontener DIV w dokumencie HTML, wykorzystując „”Tag. Następnie przypisz to „klasa”Atrybut o określonej wartości. Na przykład, "IMG-Grayscale”Jest używany do atrybutów klasowych.

Krok 2: Wstaw nagłówki

Następnie dodaj nagłówek pierwszego poziomu za pomocą „

„Tag, a następnie osadził nagłówek poziomu drugiego za pomocą„

Krok 3: Dodaj obraz

Następnie dodaj obraz za pomocą „”Tag wraz z wymaganymi atrybutami:

• „„src„Atrybut służy do dodania adresu URL obrazu.
• "wysokość”Jest wykorzystywany do ustawiania wysokości obrazu w pojemniku.
• "szerokość”Określa rozmiar obrazu w poziomie.
• "Alt”Jest wykorzystywany do dodawania tekstu, który zostanie wyświetlony, jeśli obraz nie zostanie załadowany z niektórych powodów:

Linuxhint Content Creatorzy

Obraz w skali szarości

Wyjście

Krok 4: Actrybut klasy dostępu

Uzyskaj dostęp do atrybutu klasowego za pomocą „.IMG-Grayscale”I zastosuj„tekst-align„Właściwość, aby ustawić wyrównanie tekstu.

Krok 5: Style nagłówka

Aplikować "kolor„Właściwość na czele, uzyskując dostęp do niej z nazwą tagu”H1".

Krok 6: Konwertuj obraz na skalę szarościową

Teraz uzyskaj dostęp do obrazu, wykorzystując „img”:

.IMG-Grayscale
Text-Align: Center;

H1
Kolor: RGB (83, 21, 197);

img
Filtr: skala szarości (100%);

Aplikować "filtr„Właściwość i ustaw wartość”skala szarości (100%)„Aby przekonwertować obraz w skalę szarościową.

Wyjście

Można zauważyć, że obraz został przekonwertowany na obraz w skali szarości:

Stwierdziliśmy metodę przekształcania obrazu na skalę szarości w HTML/CSS.

Wniosek

Aby przekonwertować obraz na skalę szarości w HTML i CSS, dodaj obraz w pojemniku za pomocą „”Tag. Następnie uzyskaj dostęp do obrazu w CSS według nazwy znacznika i zastosuj „filtr„Własność o wartości”skala szarości (100%)". Ten post wykazał najłatwiejszą metodę przekształcenia obrazu w skalę szarości w HTML za pomocą CSS.