如何使所有的html元素顶部的图像

How to make all html elements top on a image

本文关键字：顶部 图像 元素 html 何使所      更新时间：2023-09-26

我想让所有的html元素都位于雨滴图像的顶部，

以雨滴图像为背景，如何制作?

DEMO => http://maroslaw.github.io/rainyday.js/demo012_1.html

由于img标记是rainyday.js所必需的，您可以添加一些自定义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;
});

这段代码所做的是…

  1. 当页面加载时删除img，因为你不再需要它在页面上了。
  2. 设置画布的z-index为-1，这样在雨天屏幕前可以看到内容。

css可以这样!

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

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

您可以使用z-index属性来完成您想要做的事情。例如，如果你将canvas { z-index: -1 }添加到你的css中，它会将所有其他元素叠加在它上面。

相关文章：