Question

我尝试使用https://github.com/qrohlf/trianglify生成的图片作为背景图片，就像作者在他的网站上所做的那样（http://qrohlf.com/trianglify/）。如何在document.body.appendChild上叠加div。

Answer 1

Trianglify库提供了一种.png()方法，我们可以使用该方法将动态生成的图像添加到页面中。

第一种方法只是将document.body.style.backgroundImage设置为生成的Trianglify图像。在这两种情况下，我们都会在创建Trianglify图像时使用window.innerHeight和window.innerWidth来获取窗口的高度和宽度。

＆＃13;

// 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() + ")";

＆＃13;

html,
body {
  height: 100%;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.

＆＃13;

您还可以创建一个元素，并将Trianglify图像设置为其背景，以将其覆盖在页面上。

＆＃13;

// 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);

＆＃13;

html,
body {
  height: 100%;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.

＆＃13;

在document.body.appendChild上叠加div作为背景

1 个答案: