我有一个网站,其中居中的背景图像在主页动画中起着至关重要的作用。
背景会一直居中,直到浏览器窗口无法适应网站的宽度,此时背景会左对齐。
这是我的身体代码:
body {
line-height:1;
margin:0px auto;
padding:0px;
background:#90a830 url(img/bg.png) no-repeat center top;
}
图像弹出窗口从背景图像上的正确位置弹出。尝试缩小浏览器窗口,您就会明白我的意思,背景移动不对齐。
thanks
Andy
将背景左设置为 50%,并将背景左边距设置为 0 减去背景宽度。这样它将始终在浏览器窗口的水平中心显示图像的水平中心。
查看我的 JSbin 演示here。我重复使用了你的图像,所以它与下面的其他示例图像看起来很奇怪!
CSS:
body {
line-height:1;
padding:0px;
margin-left:-575px; /* half your background image width */
background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)