Question

我想把我所有的html元素都放在雨滴图像的顶部，

将雨滴图像作为背景，如何制作？

DEMO =＆gt; http://maroslaw.github.io/rainyday.js/demo012_1.html

Answer 1

由于 rainyday.js 需要img标记，您可以添加一些自定义JavaScript以在屏幕前显示您的内容。为此准备你的标记如下 -

<body onload="run();" cz-shortcut-listen="true">
    <img id="background" alt="background" src="img/night.jpg" crossorigin="anonymous">
    <div class="container">
        Your contents goes here...
    </div>
    <canvas width="1920" height="705" style="position: absolute; top: 0px; left: 0px;">
    </canvas>
</body>

当rainday.js加载图片时，请使用此脚本显示您的内容。使用 jQuery 仅在页面加载时运行此脚本。

$(document).ready() {
    document.getElementById("background").remove();
    canvas = document.getElementsByTagName("canvas");
    canvas[0].style.zIndex = -1;
});

这个片段的作用是......

在页面加载时删除img，因为您不再需要在页面上显示该内容。
将画布的z-index设置为-1，以便在雨天屏幕前可以查看内容。

Answer 2

css可能会喜欢这个！

body {
    background: url(img/night.jpg) top center repeat;
}

在你的html文件中，删除元素！

Answer 3

您可以使用z-index属性来完成您想要执行的操作。例如，如果您将canvas { z-index: -1 }添加到css中，它会将其上方的所有其他元素分层。

如何使所有html元素在图像上排在最前面

3 个答案: