如何定位文本，使其不会沿着背景图像移动？

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

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

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