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?
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.