Передается ли опция непрозрачности «filter» в CSS на подэлементы?

Question

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


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

Будет ли "козел" иметь непрозрачность 50?

Answer 1

@ тридцатка: да, я хочу только фон коробки будет прозрачный. ничего больше. Я не хотите, чтобы текст внутри был прозрачным. Я не хочу, чтобы его дети были прозрачный.

Вы можете использовать:

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

• Браузеры, поддерживающие rgba, будут использовать второе объявление background с rgba.
• Браузеры , которые не будут игнорировать второе объявление background и использовать .png.

Решение, не включающее изображение .png, см.

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

Разделение на два элемента также работает, но оно покрыто другими ответами здесь, поэтому я оставлю это в покое.

Answer 2

Да, это будет http://jsfiddle.net/AlienWebguy/SxLe4/

Протестировано в IE9

Answer 3

Чтобы предотвратить двойную полупрозрачность и применить ее только к фону, вы можете разбить ее на два блока.

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>

Это, конечно, зависит от вашего контента и того, как