css - overflow hidden 不起作用

Question

嘿，我使用 2000 像素宽度的图像作为 960 像素宽度网页的背景。我正在努力做到这一点，因此当图像的一部分位于可见内容的右侧时它不会显示水平滚动条，但我正在尝试做的事情对我不起作用。

涉及到两个ID。一个是“bg”，它以背景图像作为背景，位于我想要的位置，而另一个是“bg_holder”，它只包含“bg”，我试图用它来整齐地覆盖可见网页区域并隐藏它溢出所以突出的背景图像部分不会导致滚动条。但这似乎不起作用，因为当有一部分图像位于可见网页的右侧时(但当它位于左侧时则不会)会创建滚动条。

这个 CSS 片段有什么问题吗？这个片段之外的东西会是问题的根源吗？我可以采用另一种方法吗？

#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;

#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;

Answer 1

为了回答您的问题，通过绝对定位#bg，您将其从文档流/父元素中取出，因此 overflow:hidden 无效。

作为补充说明，当您将背景图像直接放在#bg_holder 中时，您可以将背景图像准确定位到您想要的位置(x，y)，似乎没有必要将背景放在单独的div 中。至少据我所知，但我还没有看到你的其余代码，也不知道你到底想实现什么。