Question

HTML

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>James McGill</title>
        <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
      <link rel="stylesheet" type="text/css" href="style.css">
      <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-dark navbar-expand-md sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">J.M</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact me</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="intro">
      <div class="inner">
        <div class="content">
            <h1>Hello there!</h1>
            <h3>My name is James McGill and I'm a front-end web developer.</h3>
          </div>
    </section>

      <div class="wrapper">
        <h1>My skills</h1>
        <br><br>
        <h2>HTML</h2>
        <div>90%</div>
        <h2>CSS</h2>
        <div>70%</div>
        <h2>Javascript</h2>
        <div>60%</div>
        <h2>jQuery</h2>
        <div>55%</div>
      </div>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

CSS

html, body {
    height: 100%;
    margin: 0;
    width: 100%;
    padding: 0;
}
body {
        background-image: url("https://cdn-images-1.medium.com/max/2000/1*M6iNwOtplNTw1EOTcUklkQ.png");
        background-size: cover; /*This makes the image cover the whole page space*/
        background-position: center;

         color: white !important;
        font-family: 'Raleway', sans-serif;
        font-weight: 700;
}

.intro {
    height: 100%;
    width: 100%;
}

nav .navbar-nav li a {
  color: white !important;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  }

 .navbar-brand {
  color: white !important;
  }

  .content {
    text-align: center;
    padding-top: 25%; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.5);
}

嗨，如果在浏览器上查看我的网站，则向下滚动“ h1”时会看到“我的技能”位于下一页开始之前。

https://codepen.io/JamesMcGill/pen/KGNEWd在codepen上更糟。

我很难弄清楚为什么会这样。

从技术上讲，它不在同一页面上。但是，它的确与欢迎页面上的内容出现在相同的背景图像中。

请给我一些有关如何解决此问题的建议。

谢谢..

Answer 1

您已将背景图像应用于body元素，这将使其充满整个屏幕。如果希望只覆盖第一部分，则应将背景图像规则应用于该特定部分。

它在底部加倍，因为background-repeat: repeat是缺省值，而您尚未声明替代项。如果要填充屏幕，可以添加background-size: cover，也可以简单地添加background-repeat: no-repeat来防止翻倍。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

在相同背景图像下出现的下一页标题

1 个答案: