使用Body作为Parent杀死水平滚动绝对图像

时间:2012-04-05 14:19:32

标签: css background css-position horizontal-scrolling

我这里没有问太多的CSS问题,所以就这么说了。

假设我有一个页面:

<body>
   <div id="wrap">//page containment, etc.. goes here..</div>
   <img class="custom-bg" src="example.jpg" />
</body>

然后我特别为图像写了一些CSS:

#wrap {
   z-index: 100;
}
img.custom-bg {
   position: absolute;
   top: 1000px;
   left: 50%;
   margin-left: -960px //the image is 1290px wide
   z-index: 0;
}

如果你现在还不知道,是的,我正在尝试使用绝对定位来创建背景图像。是的,我知道,我可以将图像设置为身体标签的背景并使用定位来放置它,但是为了这个问题,让我们说这不是我的选择。

手头的问题是水平滚动条的外观。 Google充斥着人们关闭溢出和其他东西的例子,但我很好奇是否有人能够在执行上述操作时找到/创建明确的方法来删除水平滚动条。一个绝对的形象,幸福地生活在它自己身上。居中。并没有“附加”到窗口...因此消除了浏览器的需要,让用户知道有一个非常大的图像,他们只需要通过水平滚动一点看到它。

任何见解都会很棒。我尽可能少地编写代码,以便那些可能会搜索此示例并且不熟悉web dev的人可能很容易理解如何解决有关绝对定位和水平滚动的问题。

1 个答案:

答案 0 :(得分:1)

我可能在这里忽略了这一点,但为什么不用position:fixed代替呢?

http://jsfiddle.net/shanethehat/7MetS/