Question

我正在开发一个使用trianglify为我的英雄div生成背景图像的bootstrap网站。我希望文字进入英雄形象，但它不断推动我的形象。

HTML

<div>
    <div id="heroImageContainer">
        <div class="row">
            <div class="col-lg-1 col-centered">
                <p>Centered Text</p>
                <p>more text</p>
            </div>
        </div>
    </div>
</div>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Joshua</a>
        </div>
        <div>
          <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li> 
            <li><a href="#">Blog</a></li> 
          </ul>
        </div>
      </div>
    </nav>

CSS

/*Universals*/
.col-centered{
    float: none;
    margin: 0 auto;
}

/*************/
#heroImageContainer{
    width:100%;
    height:400px;
}

的Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
    var something = document.getElementById('heroImageContainer');
    var dimensions = something.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height
    });
    heroImageContainer.appendChild(pattern.canvas());
</script>

这是一个问题的工作小提琴

SQL Fiddle Demo

Answer 1

如何定位画布，然后在内容上添加z-index，以便将文本放在前面

canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}

文本按下包含div的背景图像

1 个答案: