•  05-07-2019
  •  | 
  •  

Domanda

Ho la seguente pagina 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>

La classe hide1 è: 

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

e la funzione JQUERY è: 

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

Il mio problema è che l'intera pagina sbiadisce. Ma voglio solo sbiadire l'immagine di sfondo del div. Come posso farlo?

È stato utile?

Soluzione

Che ne dici di aggiungere un altro div solo con l'immagine di sfondo e sbiadire solo quello?

Qualcosa del tipo: 

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

Puoi utilizzare il posizionamento assoluto per i div interni.

Altri suggerimenti

Non è possibile applicare l'opacità CSS solo all'immagine di sfondo di un elemento.

Dovresti avere due elementi, uno contenente l'immagine di sfondo (che puoi sfumare) e un altro contenente il contenuto che non sbiadisce. Quindi posizionali uno sopra l'altro utilizzando il posizionamento CSS.

Questo può diventare complicato quando l'altezza dell'elemento di contenuto non è nota in anticipo in quanto è necessario rendere l'elemento di sfondo della stessa altezza; in tal caso potrebbe essere necessaria una combinazione di posizionamento assoluto e backup dello script per IE6.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top