0

我想在这个全屏幻灯片的主体标签上添加一个 png 覆盖：演示页面

但我无法解决这个问题。除了加载第一个图像时，我将一个类“光栅”添加到正文中。

if(photoObject.image == "home.jpg" ) {
    $("body").removeClass("raster");
    }
    else {
        $("body").addClass("raster");
    }

问题是即使我设置了高 z-index raster.png 也不会出现。

有什么猜测吗？

提前致谢。

4

3 回答 3

1

您不能在z-index上设置 a body，它必须是块元素。尝试为栅格创建一个 div。

<div id="raster"></div>

CSS：

#raster {
    display: none;
    background: url(../images/raster2.png) repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

然后不是将类添加到正文，而是显示/隐藏 div。

if(photoObject.image == "home.jpg" ) {
    $('#raster').hide();
} else {
    $('#raster').show();
}
于 2012-10-25T21:42:04.770 回答
0

你应该创建一个 div，作为 body 的 HTML 的覆盖层：

<body>
<img class="ac_bgimage" alt="Background" src="img/default.jpg" style="width: 1600px; height: 1062.29px; left: 0px; top: -310.643px; display: inline;">
<div class="ac_overlay"></div>
<div class="ac_loading" style="display: none;"></div>
</body>

div 的 CSS 将是：

.ac_overlay {
background: url("img/pattern.png") repeat scroll left top transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}

享受 :D

于 2012-10-25T21:49:46.907 回答
0

另一种解决方案是将 div 隐藏在主体上，并在必要时使它们出现。

于 2012-10-25T21:50:12.287 回答