•  05-07-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

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

类似的东西：

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

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

其他提示

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top