0

我正在设计一个网页，我正在使用以下 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，它正确地替换了居中的标题图像，它将它推到工具栏下方，这样我就可以看到整个图像。

但是，重复的身体图像根本没有移位，工具栏覆盖了顶部这么多像素。这让整个事情变得不正常。

我在 CSS 中尝试了一些选项，但到目前为止似乎没有任何效果。我在这里猜测，但我认为工具栏使用“存在”在 body 标记下的 CSS 来绘制自己。

任何人都可以提出任何建议，我想要整个标题被推下，或者不。只是这样它是一致的。

4

2 回答 2

1

使用 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;

}
于 2013-02-21T04:30:48.823 回答
0

在您的标题类中更改为position: absolute;并用于top设置您希望标题从页面顶部开始的像素数。

.header {
    position: absolute;

   /* all your other styles */

    top: 200px;
}
于 2013-02-21T03:42:07.633 回答