About CSS setting layer transparency

Before I made the UI, I needed to use transparency. So Baidu found some methods to achieve the effect and did not go into details, however, during the last few days of the UI, we found that the opacity of the sub-nodes in the transparent layer is not well controlled.

So for a little research, here we record:

Of course, to achieve transparency, there are usually three methods:

1. using transparent images directly is indeed easier, but it is often necessary to make images. I personally think that the maintainability is not good.

2. Use the followingCodeSets transparency, but you will find that this method cannot be set to opacity for its child node Elements

Filter: alpha (opacity = 50);-moz-opacity: 0.5;-khtml-opacity: 0.5; opacity: 0.5;

3. This method only uses a short code, that is, you can set the transparency, or set the text and elements in the node to opacity.

First, you need to set the following style for the layer to be transparent:

Background: rgba (255,255,255, 0.5) None repeat scroll! Important;/* ensures the transparency of Firefox and other browsers, so that colleagues can set the element opacity in their subnodes */Background: # FFF; filter: alpha (opacity = 50 ); /* set a filter for IE browser to achieve transparent effect */

Then, set the following style for its child nodes:

Position: relative;/* used to set the element opacity in its subnodes in IE browser */

In this way, you can set the transparency or opacity of the text and the element settings in the node.