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

萨曼莎

我的网站反应灵敏。我希望将文本放置在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>
dfsq

您可以20%通过padding-leftwide设置相反的值来补偿偏移

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章