Can I Convert Images to Grayscale Using Only HTML and CSS?

Converting Images to Grayscale with HTML/CSS

Question:

Is there a straightforward method for displaying a color bitmap in grayscale using solely HTML/CSS, without incurring the complexities of SVG or Canvas?

Answer:

With the advent of CSS filters in Webkit, a cross-browser solution has emerged. Below is the code that enables grayscale transformation:

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

To illustrate, here's an example HTML code:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

Applying this technique to an image will convert it to grayscale, providing a simple and effective solution for monochromatic image display.

The above is the detailed content of Can I Convert Images to Grayscale Using Only HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!