我没有在这里问太多的 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;
}
如果你现在不能说,是的,我正在尝试使用绝对定位创建背景图像。是的,我知道,我可以将图像设置为 body 标签的背景并使用定位来放置它,但是为了这个问题,假设这不是我的选择。
手头的问题是水平滚动条的出现。谷歌充满了人们关闭溢出和其他东西的例子,但我很好奇是否有人能够在执行上述操作时找到/创建一个明确的方法来删除水平滚动条。一个绝对的形象,它自己快乐地生活。居中。而不是“附加”到窗口...因此无需浏览器让用户知道有一个非常大的图像,他们只需要通过水平滚动一点来查看它。
任何见解都会很棒。我包含尽可能少的代码,以便可能搜索此示例并且是 web 开发新手的人可以轻松地理解如何解决他们关于绝对定位和水平滚动的问题。