CSS Opacity inheritance issue [duplicate]

Answer 1

You cannot reset opacity. Its inherited by all descendants.

But:

• you can use rbga/hsla/alpha-png backgroungs and rgba/hsla color for texts and borders, to achieve similar effect (but with more work).

Answer 2

You'll have to hack your way around, if you want to image with transparency as hsla or rgba work only for colors. You'll have to modify your HTML, take out the text wrapper and then position it over image layer. This is the only way out.

Here you can find Chris Coyier supporting the same hack. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 3

Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the css basically you have to use the rgb color in background alpa for opacity.

background:rgba(146,146,146,0.1);

or see the example:- http://jsfiddle.net/8LFLd/3/