Acredito não ser possível, porém há workarounds.
Se precisar de opacidade apenas no background, é possível aplicar uma cor rgba
:
background-color: rgba(0,0,0,.7);
Fiddle. Note que não há suporte para IE<=8.
Caso precise aplicar a opacidade em todo elemento e não somente no background, terás que quebrar a hierarquia e transformá-los em irmãos.
Há uma terceira forma, que funciona caso você esteja buscando um efeito overlay. Seria criar um pseudo-elemento ::before
que cobre todo elemento .div-pai
e fica em baixo do .div-filho
:
.div-pai:before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: white;
opacity: 0.3;
}
Fiddle.
Desta forma o :before
é um irmão da .div-filho
e fica em baixo desta sem a necessidade de z-index
devido à ordem dos elementos. Note que a .div-pai
necessita de um position
diferente de static
, não adicionei isto ao código pois a sua .div-pai
já é fixed
.
A .div-filho
também precisa de um position
diferente de static
para aparecer sobre o :before
. Caso contrário, elementos posicionados sempre aparecem sobre elementos estáticos (vide Empilhamento sem z-indexem inglês).
Quanto a suporte para IE8, é possível utilizar um .gif
/.png
com transparência como background, ou aplicar a propriedade filter
proprietária do IE5-8. Não tive sucesso aplicando o filter
à um pseudo-elemento, mas funciona se poluirmos a marcação um pouco (adicionando uma div
).
Para testar no IE8: http://jsfiddle.net/qSsC3/12/show/
<div class="div-pai">
<div class="overlay"></div>
<div class="div-filho"></div>
</div>
.overlay {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: white;
filter: alpha(opacity=30); /* IE5-8 */
opacity: 0.3; /* IE9+ e todos browsers modernos */
}
Ou, sem criar nenhum outro elemento, outra forma que funciona cross-browser (IE8+), utilizando uma imagem como background: http://jsfiddle.net/qSsC3/17/show
.div-pai:before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDIvMDMvMTSFgaz/AAAADUlEQVQImWP4//+/LwAJSQNLpIypVwAAAABJRU5ErkJggg==);
}
Codifiquei a imagem como Data-URI para ficar mais fácil de colocar na resposta, mas não fará diferença linkar para um arquivo .png
/.gif
(exceto que geraria uma request extra). Também vou notar que IE<8 não suporta Data-URIs, embora acredito que poucas pessoas ainda se importam com suporte para IE<=7.