Caption content's opacity not setting to 1 on slide [duplicate] - html

Question

I have a paragraph element inside a div. The div has an opacity of 0.3 & the paragraph has an opacity of 1.
When I show the elements, it appears the paragraph is transparent, like it has an opacity of 0.3.
Is there a way to make the paragraph inside the div have full opacity? Maybe I can set a CSS value for this?
<div style="opacity: 0.3; background-color: red;">
<p style="opacity: 1;">abcde</p>
</div>

Answer 1

You can't, the opacity level is relative to the parent's opacity, always. So 1.0 inside 0.3 would be 100% of 0.3, which is 0.3, and 0.5 inside 0.3 would be 50% of 0.3 which is 0.15. If you're only using opacity for the background color, you can specify the color using the RGBA method so that the red will be opaque and not the content (and thus the paragraph inside it).
<div style="background-color: rgba(255, 0, 0, 0.3);">
<p>abcde</p>
</div>
See here.

Answer 2

I wanted to add this as a comment to animuson answer, but I can't post comments yet, so I'll just post it as an 'answer'. RGBa works great, but only in new browsers. Even IE8 doesn't support it, which is a serious setback, since many, MANY people still use IE8.
.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);
/* The Important Bit - Alpha Transparency */
background: rgba(200, 54, 54, 0.5);
}
Please read http://css-tricks.com/examples/RGBaSupport/ for more info.
I usually circumvent the problem entirely by using two divs. The first for the transparant background and the second for the content, positioned right over the first one. It's not neat, it's not nice, and I can't claim I'm happy with it, but... it even works in IE7 and IE6.

Answer 3

It's unfortunate that this doesn't work as you might expect. Other styles have a value for inherit - so why doesn't opacity?
There is a work-around if you're not doing anything too complicated:
Create a parent DIV (or other block element) with the width/height
you need and position:relative.
Create a child DIV with your transparency value, a width/height of
100% and position:absolute (possibly left/top:0 as well)
Create another child DIV with your content and the opacity set to
whatever you want.
Example:
<div style="width:200px;height:100px;position:relative">
<div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
<div style="opacity:.09">This is my content</div>
</div>

Answer 4

it's simple only you have do is to give
background: rgba(255,0,0,0.3)
& for IE use this filter
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000); /* IE6 & 7 */
zoom: 1;
Check this example for more
http://jsfiddle.net/epmcM/
you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/