Question

这个问题听起来很简单，但我是CSS的专家，我认为这是不可能的（一件罕见的事情）。

如果<div>没有背景（例如，您可以看到它），是否可以使用CSS为<div>提供一个恒定的上边距？

基本上，我希望背景图像在网站的前100px中可见，因此即使向下滚动，顶部边距仍然存在。

你可以在这里查看一些实时代码：
http://www.codemyconcepthq.com/projects/2453/

以下是我正在尝试做的一些信息图：
http://cl.ly/40bD

谢谢！

Answer 1

您可以尝试的一种解决方案是剪切背景的顶部（此图片：http://www.codemyconcepthq.com/projects/2453/images/bg-body.png），然后将其设置为标题的背景。

因此，当您向下滚动时，内容会显示在您的标题下，您将看不到该内容，因为您的标题会有背景。

修改

不要像我说的那样剪切背景，只需将标题的背景设置为与主背景相同的图像。这将阻止浏览器下载两个图像（这是无用的，因为图像是相同的）。

Answer 2

查看代码，我认为你能做的最好的就是弹出另一个<div> <div id="header">，将<body>的背景图片应用到<div id="header">，然后申请您的半透明图像到您放入的<div>。然后，滚动内容将被<div id="header">的新背景隐藏。

所以，HTML：

<div id="header"><!-- Begin Header -->
    <div id="header-inner">
    </div>
</div>

和CSS：

#header {
    background:url("../images/bg-body.png") no-repeat fixed center top #000000;
}

#header-inner {
    background:url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
}

Answer 3

你可以通过在同一个区域放置一个与标题部分后面的背景完全相同的非透明背景来获得相同的效果，并且内容（在你的情况下是#wrapper？）落后于

如何？ CSS“位置：绝对”恒定保证金 - 顶部？可能？

3 个答案: