我的网站反应灵敏。我希望将文本放置在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>
您可以20%
通过padding-left
为wide
类设置相反的值来补偿偏移:
#target.wide {
left: -20%;
padding-left: 20%;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句