•  05-07-2019
  •  | 
  •  

Question

J'ai la page HTML suivante: 

<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 est: 

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

et la fonction JQUERY est: 

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

Mon problème est que toute la page s'estompe. Mais je veux seulement atténuer l'image de fond de div. Comment puis-je faire cela?

Était-ce utile?

La solution

Qu'en est-il d'ajouter un div de plus avec uniquement l'image de fond et de le réduire en fondu?

Quelque chose comme: 

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

Vous pouvez utiliser le positionnement absolu pour les divs internes.

Autres conseils

Vous ne pouvez pas appliquer l'opacité CSS uniquement à l'image d'arrière-plan d'un élément.

Vous devez disposer de deux éléments, l’un contenant l’image d’arrière-plan (que vous pouvez fondre en fondu) et l’autre contenant le contenu non atténué. Vous les positionnez ensuite les uns sur les autres à l'aide du positionnement CSS.

Cela peut devenir délicat lorsque la hauteur de l'élément de contenu n'est pas connue à l'avance car vous devez donner à l'élément d'arrière-plan la même hauteur. Dans ce cas, vous aurez peut-être besoin d’une combinaison de positionnement absolu et de sauvegarde de script pour IE6.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top