我正在尝试使用 https://github.com/qrohlf/trianglify 生成的图像作为作者在他的网站上所做的背景图片 ( http://qrohlf.com/trianglify/ )。如何在 document.body.appendChild 上叠加一个 div。
最佳答案
Trianglify 库提供了一个 .png()
方法,我们可以使用它来将动态生成的图像添加到页面。
第一种方法只是将 document.body.style.backgroundImage
设置为生成的 Trianglify 图像。在这两种情况下,我们都将使用 window.innerHeight
和 window.innerWidth
在创建 Trianglify 图像时获取窗口的高度和宽度。
// Create the Trianglify image
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 30});
document.body.style.backgroundSize = "cover";
document.body.style.backgroundImage = "url(" + pattern.png() + ")";
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.
您还可以创建一个元素,并将 Trianglify 图像设置为它的背景,以将其覆盖在页面上。
// Create the Trianglify image
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
cell_size: 30});
var overlay = document.createElement("div");
overlay.style.position = "absolute";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.height = "100%";
overlay.style.width = "100%";
overlay.style.opacity = "0.8";
overlay.style.backgroundSize = "cover";
overlay.style.backgroundImage = "url(" + pattern.png() + ")";
document.body.appendChild(overlay);
html,
body {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.
关于javascript - 在 document.body.appendChild 上覆盖 div 作为背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44749276/