Leilin Peng Share: CSS image transparent / opaque

　　Using CSS is easy to create transparent images.

　　Note: CSS Opacity property is part of the W3C CSS3 recommendations.

　　Example 1 - Create a transparent image

　　CSS3 attributes of transparency is opacity.

　　First, we will show you how to create a transparent image with CSS.

　　Normal image

　　Transparency with the same image:

　　Consider the following CSS:

　　img {opacity: 0.4; filter: alpha (opacity = 40); / * IE8 and earlier * /}

　　IE9, Firefox, Chrome, Opera, and Safari browser uses the transparency properties of the image may become opaque. Opacity attribute values from 0.0 - 1.0. The smaller the value, such that the elements more transparent.

　　IE8 and earlier versions filter: alpha (opacity = x). X can take values from 0 - 100. Lower value, such that the elements more transparent.

　　Example 2 - transparency of the image - the effect hover

　　Move your mouse over the image:

　　CSS style:

　　img {opacity: 0.4; filter: alpha (opacity = 40); / * IE8 and earlier * /} img: hover {opacity: 1.0; filter: alpha (opacity = 100); / * IE8 and earlier version * /}

　　CSS is a first block in Example 1 and similar to the code. In addition, we have added what happens when users hover over one of the images when. In this case, when the user hovers over the image, we hope that the picture is clear.

　　This is the CSS: opacity = 1.

　　IE8 and earlier versions: filter: alpha (opacity = 100).

　　Away from the image when the mouse pointer, will re-transparent image.

　　Example 3 - clear text box in the

　　The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box. The text in the transparent box.

　　Source code is as follows:

　　First, we create a fixed height and width of the div element with a background image and border. Then we create a smaller div elements inside the first div. The div has a fixed width, background color, border - and it is transparent. Inside the transparent div, we add some text inside the P element. (Editor: Leilin Peng Source: network intrusion deleted)

Leilin Peng Share: CSS image transparent / opaque

Guess you like