Question

我想在此全屏幻灯片中为body标签添加png叠加层：demo page

但我无法解决这个问题。除了加载第一个图像时，我向主体添加了一个“栅格”类。

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

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

有什么猜测吗？

提前致谢。

Answer 1

您无法在z-index上设置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();
}

Answer 2

你应该创建一个div，作为叠加层正文的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

Answer 3

另一个解决方案是隐藏身体上的div并在必要时显示它们。

全屏幻灯片的背景图案问题

3 个答案: