Question

我正在设计一个网页，我正在使用以下CSS来创建页面标题，主标题图像以1000px宽度页面为中心，并且重复边缘图像跨越顶部正文和标题下方分布在整个浏览器页面宽度上。

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中尝试了一些选项，但到目前为止似乎没有任何效果。我在这里猜测，但我认为工具栏使用身份标签下“存在”的CSS来绘制自己。

任何人都可以提出任何建议，我希望整个标题都被推倒，或者不是。这是一致的。

Answer 1

使用Chrome开发者工具（点击f12），您可以检查（单击底部的放大镜图标）工具栏元素。这样做可以看到它确实插入到文档正文中。遗憾的是，这会导致您看到的实际行为。换句话说，这不是你的错，而是工具栏开发人员的错误。

一个（丑陋的）解决方法是在你的内容周围添加一个div并将背景应用于此。

E.G。

<强> 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;

}

Answer 2

您的标题类中的

更改为position: absolute;并使用top设置您希望标题位于页面顶部的像素数。

.header {
    position: absolute;

   /* all your other styles */

    top: 200px;
}

浏览器工具栏会干扰CSS标头区域

2 个答案: