Compatible with mask display of ie7, 8, 9, 10, FF and Chrome

I often encounter this situation. I want to realize that there is a layer of mask and button on the picture. When the mouse rolls over, the color of the mask becomes darker and the button picture changes. After many bumps and bruises, I finally came up with a compatible solution as mentioned in the question.

For the implementation of masking, place the mask layer, button, and picture in the same div. According to the position following feature of absolute, place the mask layer and button in front of the picture. The position is set to absolute so that they do not occupy any space. . Set the color and transparency of the mask layer. Since the color and transparency will be set to the transparency of the entire mask layer and its sub-elements, if the button image is placed in the mask layer, the button image will also have transparency, which will not achieve what you want. Visual effect, so set the mask layer and button icon to flat.

However, in IE7 and 8, rgba in background-color cannot show the effect of the mask layer, so you need to change the way of writing the color and transparency in the red box:

, background is set to black, opacity sets transparency, filter is an IE filter (to make IE compatible and display transparency)

This achieves consistent visual effects for each browser mentioned in the title: