Question

我有非常简单的html页面，有looong（~880px宽度）水平全景图像。

图片在css中设置为背景 background-image:url('long_jpg.jpg');。

我只需要在页面底部有一个滚动条就可以滚动整个背景图像。

如何用css做到这一点？你能举一个有用的例子吗？

Answer 1

一种方法是将体宽设置为与图像相同的宽度

body {
    width:8000px;
}

如果您有任何其他内容，您希望将所有内容封装在div中，以便内容不会在8000px中破碎。

Answer 2

你有什么理由不这样做吗？

HTML：

<body>
    <img src="picture.jpg" class="bgpic" />
</body>

CSS：

body
{
    margin: 0;
    padding: 0;
    width: 8000px;
    height: 100%;
}

.bgpic
{
   width: 100%;
   height: 100%;
}

Answer 3

查看此工作示例http://jsfiddle.net/a9QvT/1/

.panorama
{
    width: 1280px;
    height: 1024px;
    background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}

Answer 4

就像这样...

body {
margin: 0px; padding: 0px;
background-image: url('long_jpg.jpg');
min-width: 8000px;
height: 100%;
}

但是一个快速的警告，就设计和布局而言，人们习惯于向上和向下滚动的页面，要求它们左右滚动对于大多数人来说似乎很有吸引力。除非你使用一些锚标签，否则他们只需点击他们的方式到页面上的特定点，而无需拖动滚动条。

如何为长水平背景图像应用滚动？

4 个答案: