2013-04-01

How to make transparent elements without affecting the child elements

If we define the Opacity of an element with the usual CSS Opacity style, it will affect for the child elements too. It doesn’t matter whether you override the opacity in child element or not, it won’t change back. To get rid of that, we can use the below CSS3 style.

rgba(0, 0, 0, 0.4);

rgba is a CSS3 style. We can define the color using R G B values and as the final parameter, we can pass the opacity level. Then it will affect only for that element. See how cool and easy it is?

If you are worrying about the support of CSS3 in your browser, then you have two options.

1. Instead of making the elements as inner, you could always use position and margin styles to place the element on top of the other element. In that way, there are no child elements so won’t affect the opacity.

2. You can simply make images of the transparent elements and use them.

No comments: