How to turn images gray with css in firefox

How to turn images into gray using CSS in Firefox: This can be achieved through the attribute [-webkit-filter:grayscale(100%);]. The filter attribute defines the visual effects of the element, such as blur and saturation.

The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

(Recommended tutorial: css video tutorial)

Attribute introduction:

filter attribute defines the content of the element (usually ) Visual effects (such as blur and saturation).

Attribute value:

grayscale(%) Convert the image to grayscale image. The value defines the scale of the conversion. If the value is 100%, the image will be completely converted to grayscale, and if the value is 0%, the image will remain unchanged. Values ​​between 0% and 100% are linear multipliers of the effect. If not set, the value defaults to 0;

Code example:

Implementation effect:

(Related recommendations: CSS tutorial)

The above is the detailed content of How to turn images gray with css in firefox. For more information, please follow other related articles on the PHP Chinese website!