•  05-07-2019
  •  | 
  •  

Pergunta

Eu tenho a seguinte página HTML:

<body>
    <div class="hide1" style="width:1000px; height:1000px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="2" align="center">Heading</td>
        </tr>
        <tr>
          <td width="51%">Left1</td>
          <td width="49%">right 1 </td>
        </tr>

        <tr>
          <td>Left 2 </td>
          <td>right 2 </td>
        </tr>
    </table>
    </div>
</body>

A classe hide1 é:

<style>
.hide1 {
  background: url(back.png) no-repeat;
}
</style>

E a função jQuery é:

<script>
 $(document).ready(function(){
 $("div.mover").click(function () {
 $("div.hide1").fadeTo("slow", 0.33);
 });
 });
</script>

Meu problema é que a página inteira desaparece. Mas eu só quero desaparecer a imagem de fundo da div. Como posso fazer isso?

Foi útil?

Solução

Que tal adicionar mais uma div com apenas a imagem de fundo e desaparecer exatamente essa?

Algo como:

<div class="wrapper">
  <div class="image">
    //FADE THIS
  </div>
  <div class="content">
    // DON'T FADE THIS
  </div>
</div>

Você pode usar o posicionamento absoluto para as divs internas.

Outras dicas

Você não pode aplicar a opacidade do CSS apenas à imagem de fundo de um elemento.

Você teria que ter dois elementos, um contendo a imagem de plano de fundo (que você pode desbotamento) e outro contendo o conteúdo que não fading. Você os posiciona em cima um do outro usando o posicionamento CSS.

Isso pode se tornar complicado quando a altura do elemento de conteúdo não é conhecida com antecedência, pois você precisa tornar o elemento de fundo a mesma altura; Você pode precisar de uma combinação de posicionamento absoluto e backup de script para o IE6 nesse caso.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top