0

我有一个非常简单的 html 页面，带有 looong (~8000px 宽度) 水平全景图像。

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

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

怎么能用css做到这一点？你能举个例子吗？

4

4 回答 4

0

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

body {
    width:8000px;
}

如果您有任何其他内容，您希望将所有内容封装在一个 div 中，这样内容也不会在 8000 像素范围内破碎。

于 2013-08-10T13:53:33.407 回答
0

像这样...

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

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

于 2013-08-10T16:37:36.773 回答
0

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

HTML：

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

CSS：

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

.bgpic
{
   width: 100%;
   height: 100%;
}
于 2013-08-10T14:07:13.537 回答
0

检查这个工作示例http://jsfiddle.net/a9QvT/1/

.panorama
{
    width: 1280px;
    height: 1024px;
    background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg);
}
于 2013-08-10T14:39:29.747 回答