如何定位文本以便它不会沿着背景图像移动？

Question

我的网站是响应式的。我想让文字放在div中，不要沿着背景图像移动。

CSS

#target {
    position: relative;
    left:0;
    background-image:url('../img/top-bg.jpg');background-repeat:no-repeat;
     width: 120%; height: 400px;
    transition: all 2s ease-in-out;
    background-size:cover;
}
#target.wide{
    left: -20%;
}

HTML

<div class="small-12 medium-12 large-12  columns home" style="background-color:#ff0;width: 100%; height: 400px; float: left; z-index:2000; position: relative; overflow: hidden;">

    <div id="target">
        <div class="small-12 medium-11 large-11 columns text2">
                 Beyond Law,<br/>
                 The Spirit of Innovation is Our strenght.
                 </div>
    </div>


</div>

<div style="clear: both"></div>

Answer 1

您可以通过为20%类设置相对padding-left来补偿wide偏移量：

#target.wide {
    left: -20%;
    padding-left: 20%;
}