Question

我刚刚开始学习HTML，并且已经被困了几个小时了。

图片不会显示。

.background {
  background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Preptechies: The Wiki</title>
  <link rel="stylesheet" href="Assets/main.css">
</head>

<body>
  <div class="wrapper">
    <header id="header">
      <h1>Welcome to our <strong>Webpage</strong>!!</h1>
      <h2>This is our group members</h2>
    </header>

    <div class="background">

    </div>

  </div>
</body>

</html>

我从W3Schools中获取了CSS，因为我想使图像适合整个背景，并且在滚动浏览器时不会重复移动。

Answer 1

问题是.background没有高度。

是的，您有height: 100%，但这与没有身高的.wrapper有关。

添加：html, body, .wrapper { height: 100% }来解决此问题。

.background{
    background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

html, body, .wrapper {  height: 100%  }

   <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Preptechies: The Wiki</title>
<link rel="stylesheet" href="Assets/main.css">
  </head>

  <body>
  <div class="wrapper">
    <header id="header">
      <h1>Welcome to our <strong>Webpage</strong>!!</h1>
      <h2>This is our group members</h2>
    </header>

    <div class="background">

    </div>

  </div>
  </body>
</html>

外部固定背景图像未显示

1 个答案: