jquery div背景fadein

时间:2009-10-21 14:34:42

标签: jquery css fadein

我有以下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的背景图像。我怎么能这样做?

2 个答案:

答案 0 :(得分:0)

如果只添加背景图像一个div并使其淡化呢?

类似的东西:

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

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

答案 1 :(得分:0)

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

你必须有两个元素,一个包含背景图像(你可以褪色),另一个包含不褪色的内容。然后使用CSS Positioning将它们放在彼此的顶部。

当事先不知道内容元素的高度时,这可能会变得棘手,因为您需要使背景元素具有相同的高度;在这种情况下,您可能需要为IE6进行绝对定位和脚本备份的组合。