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

Convert an Image to Grayscale in HTML/CSS: A Simple Solution

Displaying a color bitmap in grayscale is possible with the help of CSS filters. This approach provides a cross-browser solution and is relatively straightforward to implement.

To apply a grayscale effect to an image using CSS, simply add the following code to your style sheet:

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

This code will convert all images on the page to grayscale. Alternatively, you can target specific images:

#my-image {
  /* CSS styles */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

To disable the grayscale effect on hover, add the following code:

#my-image:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

With this simple CSS solution, you can easily display images in grayscale without the need for complex techniques like SVG or Canvas.

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