Example of how CSS makes images grayed out

A problem recently encountered in the project is to make the image grayed out. I thought about several solutions.

One is to replace images, that is, to make normal images gray. This method should be the most stable,

However, it takes time to create unnecessary images. It should be a waste of time. Programmers are too lazy,

I like computers to do more things.

2. Then I thought of the second one, that is, using css to solve the problem. There is a search on the Internet. Add "filter: gray;" to the image style.

This is the effect of applying a filter.

This problem is solved for IE users, but it does not work in firefox. The problem is that IE supports filters, but firefox does not.

Later, images can only be displayed in a semi-transparent manner in firefox, which can also achieve satisfactory results.

"Filter: gray;-moz-opacity:. 1; opacity: 0.1 ;"

This line of code turns gray in IE and translucent in firefox.

The filter: gray attribute is only supported by IE. The-moz-opacity attribute is supported by firefox in earlier versions and opacity in later versions.

"Filter: Alpha (opacity = 10);-moz-opacity:. 1; opacity: 0.1;"

This line of code is translucent in IE and firefox.