How Can I Convert a Color Image to Grayscale Using Only HTML and CSS?

Converting an Image to Grayscale Using HTML/CSS

This question seeks to explore an effortless method for displaying a color bitmap image in grayscale solely through HTML and CSS. The goal is to avoid the complexity of using SVG or Canvas and find a solution that is compatible with Firefox 3 and Safari 3 or later.

Fortunately, the emergence of CSS filters in Webkit has provided a cross-browser solution for this task. The following code snippet illustrates how to achieve the desired grayscale effect:

<img src="image.png">

The filter property is supported by Internet Explorer 6-9 and Microsoft Edge, while the -webkit-filter property is supported by Google Chrome, Safari 6 , and Opera 15 .

To disable the grayscale effect on hover, the following CSS rules can be applied:

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

This simple solution allows for the conversion of color images to grayscale in HTML/CSS, without requiring additional overhead of SVG or Canvas.

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