How CSS implements transparent and opaque images (full code)

This article gives you the content is about how CSS to achieve the transparency and opacity of the image (complete code), there is a certain reference value, the need for friends can refer to, I hope to help you.

1. Image transparency opaque to the opacity element, with a value of 0 to 1, usually 0.4 or 0.6 is enough.

2.IE8 The following browsers are written as: Filter:alpha (opacity=40), with a value of 0 to 100. Generally write both at the same time for compatibility.

3. There are two types of use, the first direct write on the image to increase the degree of ambiguity (equivalent to the gray mask); the second picture is written in the background p, nested p write a mask with color, the inside can also add text. The specific wording is as follows:

<! DOCTYPE html>
Operating effect:


Attention:

1. Pseudo-Class: hover You can set the transparency when the mouse moves to the picture.

2.div Write background image The default height is 0, be sure to limit the height to display the full size of the picture.