html - 无法定位标题的背景图像

所以我最近接触了 html 和 css，现在我已经弄乱了几天。问题是我无法将标题与 background-image: center; 居中。当我这样做时，我的标题变成白色而不是图像。

h1 {
  font-family: 'Raleway', sans-serif;
  color: #09AA34;
  margin-left: auto;
  margin-right: auto;
}

p1 {
  font-size: 200px;
}

.header {
  height: 120px;
  width: 900px;
  padding-left: 650px;
  padding-bottom: 100px;
  background-image: url("header.jpg")
  background-position: center;

}

.navigation {
  background-color: #c6e2ff ;
  background-image: url("ocean.jpg");
  text-align: center;
  width: 100%;
  border-style: solid;
  border-width: thin;
}


.navigation ul {
  list-style-type: none;
  margin-bottom: 0;
}

.navigation li {
  color:  #ffffff;
  display: inline-block;
  font-family: 'Raleway', bold;
  padding: 25px 100px;
  font-weight: uppercase;
  text-align: left;
}

.NavigationWords{
  background-color: #ffffff;
  width: 90%;
  margin-left: 195px;
  float: left;
}

h2 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  background-color: #c6e2ff;
  color:  #ffffff;
  padding: 20px;
  margin: 0;
  background-image: url("ocean.jpg");
}

p {
  margin-top: 0;
  font-family: 'Raleway', bold;
  line-height: 1.5em;
  font-size: 20px;
  margin-bottom: 0;
   vertical-align: middle;
    padding: 10px 20px;
}

.Join {
  margin-top: 0;
}

.LeftPanel {
  border-style: solid;
  max-width: 190px;
  max-height: 510px;
  text-align: center;
  position: absolute;
  width:195px;
  min-height:510px;
}

.LeftPanel ul {
  list-style-type: none;
  padding: 0;
}

.LeftPanel li {
  padding: 20px 10px;
}

.wrap {
  position:relative;
}

<!DOCTYPE html>
<html>
    <head>
      <title>Belgian Entertainment</title>
      <link href="belgian.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

    </head>
    <body>
        <div class="header">
          </div>
        <div class="navigation">
          <ul>
            <li> ABOUT </li>
            <li> JOIN </li>
            <li> PORTFOLIO </li>
            <li> FUTURE </li>
          </ul>
        </div>
      <div class="wrap">
        <div class="NavigationWords">
          <div class="About">
            <h2>About</h2>
              <p> text
              <br/>
              <br/>
              </p>
          </div>

          <div class="Join">
            <h2>Join</h2>
              <p> text
              <br/>
              <br/>
               </p>
          </div>

          <div class="Portfolio">
            <h2> Portfolio </h2>
            <p> text.
            <a href="www.imgur.com"> BE Portfolio </a>
            <br/>
            <br/>
            </p>
          </div>

          <div class="Future">
            <h2> Future </h2>
            <p> text</p>
          </div>
        </div>
      </div>
        <div class="LeftPanel">
          <ul>
            <li id="toplogin">Login</li>
            <br/>
            <br/>
            <li id="bordersign">Sign-up</li>
            <br/>
            <br/>
            <li id="bordersign">Portfolio</li>
            <br/>
            <br/>
            <li id="bordersign">Contact</li>
          </ul>
        </div>
  </body>
</html>

最佳答案

你丢了一个“;”在 css 的背景图像定义的末尾: fiddle

h1 {
    font-family: 'Raleway', sans-serif;
    color: #09AA34;
    margin-left: auto;
    margin-right: auto;
}



p1 {
    font-size: 200px;
}

.header {
    height: 120px;
    width: 900px;
    padding-left: 650px;
    padding-bottom: 100px;
    background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
    background-position: center;

}

关于html - 无法定位标题的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42936328/

html - 无法定位标题的背景图像

上一篇：html - 防止更改访问的 anchor 颜色

下一篇：html - 调整浏览器大小时，如何避免文本从图像中移开？