gpt4 book ai didi

javascript - 如何使所有 html 元素位于图像顶部

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:18 25 4
gpt4 key购买 nike

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

以雨滴图片为背景,怎么做?

演示 => 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. 设置canvas的z-index-1,这样在雨幕前也能看到内容。

关于javascript - 如何使所有 html 元素位于图像顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25111343/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com