How to apply opacity to a parent wihout affecting the child?

I have this sample: http://jsfiddle.net/funguy/jKfeQ/

Dont be confused, its something here, but 开发者_如何学编程slighly visible. I want to apply the opacity only to the .postmorewrapper1, but not to the .read-more1 .

Any advices on how I can reach this? Thanks!

You can't, you'll need to make them siblings and position them to emulate parent/child.

As said by AlienWebguy, you can't do it with a CSS property like Opacity without affecting the children.

If you really need to change the opacity of a parent without affecting it's children, the best cheat would be to swap the background-image of the parent to a png transparent, this way the children won't be affected and the opacity of the parent would seem changed.

The problem is that the opacity property applies to all child elements. An alternative would be to instead use rgba when specifying the background colour to .postmorewrapper1, as opposed to a hex value. So instead of this:

background: #FCFCFC;
opacity: 0.4;

Try this:

background: rgba(252, 252, 252, 0.4)

One thing to bear in mind with this technique though is that IE versions 8 and below don't support rgba (it was added in v9). There are a couple of options to get around this:

1. Use an IE filter (which can have an impact on performance if overused)
2. Use a semi-transparent PNG image for IE versions 8 and under (which is less maintainable)

The CSS for option 1 would be:

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC);   /* IE6 & 7 */
zoom: 1;

You'd put that in your IE stylesheet if you have one.