jquery div 背景淡入淡出答案

【问题标题】：jquery div background fadeinjquery div 背景淡入淡出
【发布时间】：2011-11-09 15:25:07
【问题描述】：

我有以下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>

hide1 类是：

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

而JQUERY函数是：

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

我的问题是整个页面都消失了。但我只想淡化div的背景图片。我该怎么做？

【问题讨论】：

标签： jquery css fadein

【解决方案1】：

如果再添加一个只有背景图像的 div 并仅淡化那个 div 呢？

类似：

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

您可以对内部 div 使用绝对定位。

【讨论】：

【解决方案2】：

您不能仅将 CSS 不透明度应用于元素的背景图像。

您必须有两个元素，一个包含背景图像（可以淡化），另一个包含非淡化内容。然后，您可以使用 CSS 定位将它们放在彼此的顶部。

如果事先不知道内容元素的高度，这可能会变得很棘手，因为您需要使背景元素的高度相同；在这种情况下，您可能需要结合绝对定位和 IE6 脚本备份。

【讨论】：