用背景颜色填充 header

Question

我目前在 header 的同一行上有标题 1 和徽标，现在我想要 header 的背景颜色。理想情况下，我希望它也下降到导航栏下方。我遇到的问题是颜色没有像我想象的那样填充页面的顶部。它只覆盖标题，它还覆盖同一行的徽标。

如何阻止颜色覆盖图像以及如何使颜色从页面顶部扩散到导航栏下方。

HTML:

.header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
  <header>
    <div class="header">
      <img src="images/pizzalogo.jpg" alt="logo"/>
      <h1> The Clay Oven Pizzeria</h1>
    </div>
    <br><br>
    <div class="nav">
      <ul>
        <li><a class="active" href="#index"> Home </li>
        <li><a href="#menu">Menu</li>
        <li><a href="#about">About</li>
        <li><a href="#about">Contact Us</li>
        <li><a href="#signup">Sign Up</li>
      </ul>
    </div>
  </header>
<body>
</body>
</html>

编辑：这就是我所说的覆盖徽标的背景颜色：

Answer 1

  .header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;

}

.nav{
 width: 95%;
 margin: auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
 text-align: center;
}

.nav li {
 font-family: "Lucida Sans Typewriter",Georgia,Arial;
 font-size: 16px;
 display: inline;
 height: 40px;
 width: 19.925%;
    float: left;
}

.nav li a {
    display: block;
    color: white;
    text-decoration: none;
}

.nav li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

.nav li:last-child{
 border-right: none;
}

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>The Clay Oven Pizzeria</title>
 </head>
 <header style="  background-color:#D3D3D3;">
  <div class="header" >
   <img src="images/pizzalogo.jpg" alt="logo"/>
   <h1> The Clay Oven Pizzeria</h1>
  </div>
  <br><br>
  <div class="nav">
   <ul>
    <li><a class="active" href="#index"> Home </li>
    <li><a href="#menu">Menu</li>
    <li><a href="#about">About</li>
    <li><a href="#about">Contact Us</li>
    <li><a href="#signup">Sign Up</li>
   </ul>
  </div>
 </header>
 <body>
 </body>
</html>

Answer 2

这是您期待的吗？

你看到 header 和导航栏之间的差距——这是因为 header 里面的 h1 有默认的 margin，删除它，给 padding 代替。在 header 之后 brs 也移除了。将 .header h1 css 更改为

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  padding: 20px 0 20px 40%;
  background-color:#D3D3D3;
  margin: 0;
}

阻止颜色覆盖图像是什么意思？

.header img {
  float: left;
  background: #555;
}

.header h1 {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  padding: 20px 0 20px 40%;
  background-color:#D3D3D3;
  margin: 0;
}
.headerContainer {
  background-color:#D3D3D3;
  padding-bottom: 10px;
}

.nav{
 width: 95%;
 margin: auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
 text-align: center;
}

.nav li {
 font-family: "Lucida Sans Typewriter",Georgia,Arial;
 font-size: 16px;
 display: inline;
 height: 40px;
 width: 19.925%;
    float: left;
}

.nav li a {
    display: block;
    color: white;
    text-decoration: none;
}

.nav li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

.nav li:last-child{
 border-right: none;
}

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>The Clay Oven Pizzeria</title>
 </head>
 <header>
        <div class="headerContainer">
  <div class="header">
   <img src="images/pizzalogo.jpg" alt="logo"/>
   <h1> The Clay Oven Pizzeria</h1>
  </div>
  <div class="nav">
   <ul>
    <li><a class="active" href="#index"> Home </li>
    <li><a href="#menu">Menu</li>
    <li><a href="#about">About</li>
    <li><a href="#about">Contact Us</li>
    <li><a href="#signup">Sign Up</li>
   </ul>
  </div>
  </div>
 </header>
 <body>
 </body>
</html>

Answer 3

我将 HTML header 标签换成了 body。您的 body 标签将容纳您的所有 html 减去具有您的标题的 head 标签。没什么大不了的，因为它呈现得很好，只是一个最佳实践。我还为您的 header img 更改了 css 以具有 z-index ，它将图像放在 h1 标签的顶部，并且您的 h1 标签具有 -100 的 z-index总是倒在后面。

希望对您有所帮助。

.header img {
  float: left;
  background: #555;
  z-index: 100; /* added */
  width: 100px; /* added */
}

.header h1 {
  z-index: -1; /* added */
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  position: relative;
  top: 18px;
  left: 10px;
  padding-left: 40%;
  background-color:#D3D3D3;
}

.nav{
  width: 95%;
  margin: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

.nav li {
  font-family: "Lucida Sans Typewriter",Georgia,Arial;
  font-size: 16px;
  display: inline;
  height: 40px;
  width: 19.925%;
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.nav li:last-child{
border-right: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>The Clay Oven Pizzeria</title>
</head>
<body>
  <header>
    <div class="header">
      <img src="https://images.template.net/wp-content/uploads/2014/10/28083349/Pick-a-Pizza-Logo-of-your-Own.jpg" 
       alt="logo"/>
      <h1> The Clay Oven Pizzeria</h1>
    </div>
    <br><br>
    <div class="nav">
      <ul>
        <li><a class="active" href="#index"> Home </li>
        <li><a href="#menu">Menu</li>
        <li><a href="#about">About</li>
        <li><a href="#about">Contact Us</li>
        <li><a href="#signup">Sign Up</li>
      </ul>
    </div>
  </header>
</body>
</html>

用背景颜色填充 header

Fill header with background colour

html

css

margin

padding

background-color