Use the IE filter to make the background color transparent in CSS 3.

Tel:

Css:

{:;:;}{:;}{:;:;:;:;:;:;    }

We added a lotus flower background image to the body, and then added black to the main background with a transparency of 0.8. Check the effect.

See the problem. After you add transparency to main, the sub-elements under it all inherit the transparency attribute, so that both the text and input boxes carry transparency. You may say that the effect looks pretty good, but we only have 0.8 transparency here. If the transparency is smaller, the font will be hard to recognize.

What should I do? Don't be afraid. We have the css3 attribute rgba, but we will not introduce it here. Let's take a look at a solution without rgba.

How to locate background Separation

Since the transparency of the parent element will affect the child element, I will separate the background and put it in a blank div, add the transparent background to it, and set its width and height to the same as that of main, position them to overlap.

Html:

Tel:

Css:

{:;/* Add relative positioning to the parent element for positioning the child element */} {:;:;:;:;:;/* to keep the content on the background forever, it will not be overwritten by the background */:;/* only the located element can use z-index */} {:;/* to locate and overlap with main */:; :;:;:;:;}

Then we use the script to control the bg width and height to make it consistent with the main width and height.

Js:

 mainObj = document.getElementById('main' bgObj = document.getElementById('bg'= mainObj.clientWidth + "px"= mainObj.clientHeight + "px";

Below is:

IE and modern browsers are displayed normally.

However, there are new unnecessary labels and a lot of positioning code added here. If there are many elements on the page, it will cause quite confusion. I still want to simply add a background.

Try the rgba attribute of css.

You may be familiar with rgb to control the color. r, g, and B represent the red, green, and blue channels. The value ranges from 0 to 255 in decimal format. For example, rgb (, 0) indicates red, which is equivalent to # ff0000 in hexadecimal format. The added a in rgba indicates transparency. The value ranges from 0 to 1. Such as rgba (255, 0, 0, 0.8 ). Its biggest benefit is that it defines a color with transparency and does not affect child elements. Let's try it.

{:;/* That's simple */
}

The effect is the same. But since it is css3 attributes, have to consider compatibility issues, under the IE6-8 is completely unrecognized. No background.

Solve the compatibility problem. It will be done right away.

The solution is yes, or it depends on the "powerful" filter. This is what I saw in this article: http://blog.linxz.de/ie_filter_css3_rgba /.

It details how to use a filter to generate a background color, and provides an online tool to generate a filter code. However, the article was a long time ago and no IE9 was available at that time. After you use this method, you will find that IE678 is okay, and IE9 has a problem. The reason is that IE9 both recognizes rgba and filters, resulting in no transparency. The rendering mechanism is involved, but it is not quite clear.

Fortunately there are the latest online gadgets that have handled IE9 problems; http://www.linxz.de/css_tool/hex_color.html

You can take a good look at some hack instructions.

Well, the final css code using this tool is as follows.

{:;:;:;:;:;:;:;}{:;     :;}

No, it's figure 2. With transparency, the page is immediately available on the high-end atmosphere. I wish you a pleasant stay.

Reference: Xiao Zhi's blog post uses the IE transition filter and the RGBA attribute in CSS3 to achieve the background color transparency.