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