我正在设计一个网页，我正在使用以下 CSS 创建页眉，其中主页眉图像居中于 1000 像素宽度的页面中，并且重复边缘图像穿过页面的顶部正文和标题下方以分布在整个浏览器页面宽度上。
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
上面的 CSS 可以工作，除非出现工具栏。我正在使用带有 SEO 工具栏的 Chrome，它正确地替换了居中的标题图像，并将它向下推到工具栏下方，这样我就可以看到整个图像。
然而，重复的 body 图像根本没有移位，工具栏覆盖了顶部这么多像素。这让整个事情变得一团糟。
我已经在 CSS 中尝试了几个选项，但到目前为止似乎没有任何效果。我在这里猜测，但我认为工具栏使用 body 标签下“存在”的 CSS 自行绘制。
任何人都可以提出任何建议，我想要将整个 header 向下推，或者不向下推。只是为了保持一致。
最佳答案
使用 Chrome 开发者工具(按 F12)您可以检查(点击底部的放大镜图标)工具栏元素。这样做你可以看到它确实被插入到文档的正文中。不幸的是，这将导致您看到的实际行为。换句话说，这不是您的错，而是工具栏开发人员的错。
一个(丑陋的)解决方法是在您的内容周围添加一个额外的 div 并将背景应用到它。
例如
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
关于css - 浏览器工具栏干扰 CSS 标题区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14993996/