Does the "filter" opacity option in CSS transfer to sub-elements?

#box{
    filter: alpha(opacity=50);
}


<div id="box">
    <div id="goat">
    </div>
</div>

Will "goat" have an opacity of 开发者_如何转开发50?

Yep it will http://jsfiddle.net/AlienWebguy/SxLe4/

Tested in IE9

@thirtydot: Yes, I only want the background of the box to be transparent. nothing else. I don't want the text inside to be transprent. I don't want its children to be transparent.

You could use:

#box {
    background: url(semi-transparent-matching-the-rgba.png);
    background: rgba(0,0,255,0.5)
}

• Browsers that support rgba will use the second background declaration with rgba.
• Browsers that do not will ignore the second background declaration and use the .png.

For a solution that does not involve a .png image, see:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Splitting into two elements also works, but it's covered by the other answers here, so I'll leave it alone.

To prevent the double semiopacity and only apply it on the background, you can split it into two boxes.

CSS

#box {position: relative;}

#goat, #background {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#goat{z-index:1;}

#background {
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:-1;
}

HTML

<div id="box">
    <div id="goat"></div>
    <div id="background"></div>
</div>

This of course depends on your content and how