Hi, Manojsethi. This is actually a pretty easy task once you figure it out. I know this because I once had the same issue! Also does not require any trickery or hacks.
What you are probably trying to do is something along the lines of this:
#someParent { opacity: .5; }
You would probably expect this to work, but sadly, it doesn't.
What you need to do, would be something like what I have below:
#someParent { background: rgba(0,0,0,0.5); }
What the above css does, is set an RGB colour on the parent element and change its opacity.
The first 3 zeros represent your colour choice in their RGB codes. The third nuber (the 0.5) represents the alpha transparency (opacity) of that colour.
So, if you ever need to effect only the parent element on a web page, make sure to use rgba.
rgbaorhslacolor code.some clue with this ?
RGBA/HSLA will not inherit.
only other option would be using a png as a background image on the parent.
What you are probably trying to do is something along the lines of this:
You would probably expect this to work, but sadly, it doesn't.
What you need to do, would be something like what I have below:
What the above css does, is set an RGB colour on the parent element and change its opacity.
The first 3 zeros represent your colour choice in their RGB codes. The third nuber (the 0.5) represents the alpha transparency (opacity) of that colour.
So, if you ever need to effect only the parent element on a web page, make sure to use rgba.
I hope that has helped!
-Mike