Question

我正在尝试使用Trianglify设置网站背景。我尝试与其一起使用的网站是here。它没有任何滚动。这些示例都不适合我（它们都将生成的图像放置在其余内容的下方，而不是背景）。我也在issue #58中尝试了该建议，但这根本没有用。任何帮助将非常感激。谢谢。

Answer 1

您可以使用CSS更改包含背景的元素的位置。我希望这个问题能回答您。

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae purus quis dolor lacinia gravida. Ut sit amet purus vel tellus faucibus posuere. Pellentesque ut sapien quis elit luctus tincidunt. Etiam eros nisl, semper sit amet malesuada et, aliquet id arcu. Quisque leo ipsum, ullamcorper nec urna ac, maximus finibus tortor. Curabitur non justo condimentum, consectetur diam sed, lobortis lorem. Nulla scelerisque hendrerit nunc, eu aliquam est pretium vel. Maecenas risus mi, ultrices eget mollis sed, consectetur id eros. Donec ac mauris mattis, tincidunt lacus sit amet, congue lacus. Vivamus sed nulla sit amet dolor porttitor dictum. Cras quis mi massa. Quisque lobortis consequat ante sit amet blandit. In dictum iaculis elementum. Maecenas quis congue eros. Phasellus aliquam, libero ut fermentum accumsan, quam sem egestas elit, vel posuere purus dui id mauris. Praesent vel risus ac felis dapibus finibus in nec enim.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.1.0/trianglify.min.js"></script>
<script>
    var pattern = Trianglify({
        width: window.innerWidth,
        height: window.innerHeight,
        cell_size: 30 + Math.random() * 100,
        x_colors: 'random',
        y_colors: 'match_x',
        stroke_width: 3
    });
    document.body.appendChild(pattern.canvas())
</script>

编辑：首先展开代码段，然后运行代码。

edit2：忘记了left: 0。

使用Trianglify作为网站背景吗？

1 个答案: