jquery div 背景淡入淡出
我有以下 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的背景图像。我怎样才能做到这一点？
I have the following html page:
<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>
The class hide1 is:
<style>
.hide1 {
background: url(back.png) no-repeat;
}
</style>
and JQUERY function is:
<script>
$(document).ready(function(){
$("div.mover").click(function () {
$("div.hide1").fadeTo("slow", 0.33);
});
});
</script>
My problem is that the entire page fades. But I only want to fade the background image of div. How I can do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
添加一个仅包含背景图像的 div 并仅淡化该图像怎么样？
类似于：
您可以对内部 div 使用绝对定位。
What about adding one more div with just the background image and fading just that one?
Something like:
You can use absolute positioning for the inner divs.
您不能仅将 CSS 不透明度应用于元素的背景图像。
您必须有两个元素，一个包含背景图像（可以淡入淡出），另一个包含不淡入淡出的内容。然后，您可以使用 CSS 定位将它们放置在彼此的顶部。
当事先不知道内容元素的高度时，这可能会变得很棘手，因为您需要使背景元素具有相同的高度；在这种情况下，您可能需要 IE6 的绝对定位和脚本备份的组合。
You can't apply CSS opacity only to an element's background image.
You'd have to have two elements, one containing the background image (which you can fade) and another containing the non-fading content. You then position them on top of each other using CSS Positioning.
This can become tricky when the content element's height isn't known in advance as you need to make the background element the same height; you may need a combination of absolute positioning and script backup for IE6 in that case.