Magic CSS element transparency Method

1. HTML element transparency

In fact, it is easy to implement element transparency in CSS. Directly run the Code:

opacity:.5

Opacity refersOpacity, Value range: 0 ~ Between 1, 1 indicates completely opaque, 0 indicates completely transparent.

Browser A basically supports the opacity attribute, but it is always okay to run into IE. However, IE has a filter, which can help us handle opacity:

filter:alpha(opacity=50);

Note:In fact, we will encounter a transparent background layer, and the opacity attribute will inherit. To avoid this problem, we need to combine positioning to implement it.

In CSS3, you can also use HSLA (color tone, saturation, brightness, transparency) or RGBA (red, green, blue, transparency) for element transparency. For example:

background: hsla(0,100%,50%,0.5);background: rgba(0,0,0,0.5);

2. Transparent background images

One noteworthy issue is that PNG8 images are only supported under IE6.TransparentThat is to say, the use of PNG8 in IE6 cannot achieve the translucent effect of the background. Transparency does not matter sometimes, but the problem is that full transparency will lead to disgusting edges in the image. Although PNG8 can be exported by selecting the color of the edge or removing the edge, it is not perfect.

Fortunately, PNG24 supports full transparency, so PNG24 is very powerful. In the image transparency solution, it is definitely the highest Force Index.

However, when I run into IE, another disgusting problem occurs again,IE6 does not support translucent PNG24 transparent Images(It may be a bit difficult ).

What should I do? Filter!

Directly run the Code:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

However, IE6 is a tragedy. When the CSS document and page address are inconsistent (for example, many websites place static resources on CDN servers in different domains of the website), the image referenced by the filter will not be available. SoOnce the resource is cross-origin, the image address must be an absolute path..

Source: http://www.mangguo.org/