Question

所以我一直在使用Trianglify库，我一直很喜欢它。我唯一的问题是它处理文本的方式：它将它全部推到顶部，而我希望随机生成的背景充当背景，上面有文字。到目前为止，这是我的代码：

<script>
   var pattern = Trianglify({
    height: window.innerHeight,
    width: window.innerWidth,
    cell_size: 40});

  document.body.appendChild(pattern.canvas())

  </script>

和

        <div class="container-fluid" id="welcome">
        <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <h1> Welcome to the website </h1>
        </div>
        </div>
        </div>

请帮忙！非常感谢你的时间。

Answer 1

我刚遇到这个问题，因为我有同样的问题。这就是我的所作所为。

<强> HTML

<canvas id="container1"></canvas>
<script>
var pattern = Trianglify({cell_size: 25, x_colors: 'Blues'});
pattern.canvas(document.getElementById('container1'));
</script>

<div class="screen-container trianglify-container">
    <div class="container">
        <div class="row">
            <h3>This is where my text goes</h3>
        </div>
    </div>  
</div>

<强> CSS

.trianglify-container {
    background-color: transparent;
    color:#fff;
    text-align: center;
    padding-top: 20vh;
}
canvas#container1 {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

<强>解释我正在使用Bootstrap，因此HTML中的container和row div。将canvas#container1设置为absolute位置会修复它，并且HTML中的所有内容都应该覆盖它。将width设置为100vw并将height设置为100vh可确保它占用整个屏幕。

将trianglify-container位置设置为relative可确保它相对于其上方的任何fixed或absolute对象显示，在本例中为画布。使用填充，您可以移动到想要文本的位置。

如果我希望页面上的其他内容始终具有相同的trianglify背景，我可以这样做：

canvas#container1 {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

使用Trianglify Javascript库中的文本

1 个答案: