我试图以一种间接的方式使图像成为背景图像：通过制作绝对定位的图像。该图像非常大。但是，我注意到该图像仍然扩展了我的网页的范围。这是为什么？它的位置绝对正确，所以不应该这样做，对吗？
这是我的意思的示例：http : //jsfiddle.net/xeV6t/
佛罗里达州的巨大海豹绝对位于屏幕上并居中
img {
width: 1000px;
height: 1000px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -500px;
margin-left: -500px;
}
但是它仍然会占用空间并扩展网页，如它如何迫使用户滚动所示。我不希望这种扩张发生。如何使它消失？
我尝试使用overflow:hidden，但是并没有达到我想要的效果-我仍然希望用户上下滚动，以防页面由于其他原因而变长。
您的图像仍然是DOM对象，它占据了空间，无论是否已完全定位
背景尺寸：封面
你应该看看这个：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
如果将图像作为绝对定位的div的背景图像，则它应该执行您需要的操作：
img {
width: 1000px;
height: 1000px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -500px;
margin-left: -500px;
background: url(images/your_image.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句