10

Eu tenho uma div com opacidade aplicada, porém essa div possui elemento filho. Eu não quero que seja aplicada opacidade a esses elementos filhos, teria alguma maneira de resolver isso?

Exemplo: http://jsfiddle.net/qSsC3/1/

Código do link:

.div-pai{
  width: 400px;
  height: 400px;
  background-color: black;
  position: fixed;
  opacity: 0.7;
}
 .div-filho{
  width: 150px;
  height: 150px;
  position:absolute;
  top: 50%;
  left: 50%;
  background: blue;
  margin-top: -75px;
  margin-left: -75px;
  opacity: 1;
}
<div class="div-pai">
    <div class="div-filho"></div>
</div>

5 Respostas 5

12

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.

3
  • funcionou muito bem as suas sugestões, porém no ie8 eu não obtive sucesso... Seria a unica solução para ie8 uma imagem de background? Commented 3/02/2014 às 13:11
  • @DenisBernardo sim, um .gif/.png com transparência funcionaria bem. Dê-me um segundo, é possível utilizar o filter do IE também. Commented 3/02/2014 às 13:16
  • 1
    Excelente solução, funcionou perfeitamente. Obrigado pela ajuda, já não vou precisar usar imagens... ! Commented 3/02/2014 às 13:41
3

Não é possível, a opacidade dos filhos sempre vai ser relativa à dos pais. Se você está precisando mudar apenas a cor do background, poderia em vez de opacity. modificar o atributo background:

.div-pai {width: 400px;height: 400px; position: fixed; background-color: rgba(0, 0, 0, 0.7); }
3

Nesse caso, aconselharia a usar uma imagem em .png com opacidade como background no elemento pai, uma imagem de 1px por 1px repetindo, fica bem leve, alguns browser mais antigos não dão suporte a essa propriedade.

0

Bom, não é possivel fazer da forma que estás querendo, porém uma sugestão é remover o div.pai e apenas utilizar o div.filho e colocar uma borda nele, que resultaria na mesma coisa, porém seu elemento filho "central" não ficaria com opacidade, veja o exemplo que fiz no JSFiddle

Utilizei do seguinte código CSS:

.div-filho{
    width: 150px;
    height: 150px;
    position:absolute;
    background: blue;
    border: 150px solid rgba(0,0,0,0.75);
}

E removei o div.pai do HTML.

0

Já passei por caso semelhante, mas a Opacidade no Javascript é sempre herdada pelos elementos, não tem como você remover ela, então o que eu costumo fazer é criar um elemento que fique exatamente na mesma posição e dimensão do elemento que seria o pai com transparência, porém esse elemento não é filho, está após o elemento transparente e contém o que seriam os filhos dele.

O resultado pode ser visto nesse jsfiddle.

Será compatível com todos os browsers e pode ser aplicado a qualquer elemento.

Exemplo:

<div class='div_transparente'></div>
<div class='div_opaca_sem_fundo_por_cima_da_div_transparente'>
    <div class='div_filho_opaca_com_preenchimento'></div>
</div>

Existem várias soluções para contornar o problema quando é background, mas se sua div, está por cima de uma imagem, vídeo, ou algo do gênero, eu pessoalmente prefiro esta solução, pois é genérica a todos os casos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .