將document.body.appendChild覆蓋div作爲背景

Question

我試圖使用https://github.com/qrohlf/trianglify生成的圖像作爲作者在其網站（http://qrohlf.com/trianglify/）上的背景圖片。如何覆蓋document.body.appendChild上的div。

Answer 1

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.