Question

我正在使用横幅图片，该图片会根据屏幕宽度调整大小。我希望覆盖图像的其他内容也会出现在图像下方，以便在图像改变大小时减少它的上边距。我该怎么做？

＆＃13;

header {
  background-color: #02a5da;
  text-align: center;
  color: #f7f7f7;
  position: absolute;
  width: 100%;
  top: 0;
  font-size: 12px;
}

@media only screen and (max-width: 959px) {
  .tpLogin {
    visibility: hidden;
  }
}

.navBar {
  background-color: #02a5da;
  text-align: center;
  position: absolute;
  top: 0;
  height: 45px;
}

.navLink {
  padding-top: 13px;
  padding-bottom: 9px;
}


/*Home*/

.tpLogin {
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
  border: 1px solid black;
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
}

@media only screen and (min-width: 960px) {
  .tpLogin {
    margin-top: 150px;
  }
  .homeInfo {
    margin-top: 200px;
  }
}

#username,
#password {
  max-width: 80%;
  margin-bottom: 20px;
  border: 2px solid black;
  padding: 5px 10px;
}

#btnSubmit {
  width: 40%;
  padding: 5px 20px;
  background-color: #404040;
  color: #f7f7f7;
}

.login {
  margin-bottom: 20px;
}

.banner {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
  margin-top: -105px;
}

.homeIcons {
  font-size: 40px;
}

.homeInfo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.homeInfoHeading {
  font-size: 26px;
}

.homeInfoText {
  padding-bottom: 50px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .textSplit {
    border-bottom: 4px solid #02a5da;
  }
  .iconPadding {
    margin-top: 40px;
  }
}

.last {
  margin-bottom: 50px;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="navBar pure-u-5-5">
    <div class="pure-g">
      <div class="pure-u-6-24"></div>
      <a class="active pure-u-3-24 navLink" href='index.html'>
        <div class="navText">Home</div>
      </a>
      <a class="pure-u-3-24 navLink" href='about.html'>
        <div class="navText">About Me</div>
      </a>
      <a class="pure-u-3-24 navLink" href='service.html'>
        <div class="navText">Service</div>
      </a>
      <a class="pure-u-3-24 navLink" href='contact.html'>
        <div class="navText">Contact</div>
      </a>
      <div class="pure-u-6-24"></div>
    </div>
  </div>

  <img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />

  <div class="tpLogin">
    <h2>Already a Member?</h2>
    <form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
      <div class="validation">
      </div>
      <input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
      <input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
      <input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
    </form>
    <h3><a href="service.html">How do I become a member?</a></h3>
  </div>

  <div class="homeInfo pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-bullhorn homeIcons"></i>
      <h2 class="homeInfoHeading">Service</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-cogs homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Software</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3 last">
      <i class="fas fa-check-circle homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Goal</h2>
      <p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
  </div>

</body>

</html>

＆＃13;

我已经创建了一个JS小提琴，所以你可以看到我的意思。 https://jsfiddle.net/xp7b8k8p/7/

Answer 1

你需要做到这一点，所以你不能绝对定位你的形象。绝对定位不应该用于布局目的 - 当你想要从文档的自然流程中删除某些东西时（例如登录框），它就可以了。

考虑到这一点，我改变了你的风格：

＆＃13;

@media only screen and (max-width: 959px) {
  .tpLogin {
    visibility: hidden;
  }
}

.navBar {
  background-color: #02a5da;
  text-align: center;
  height: 45px;
}

.navLink {
  padding-top: 13px;
  padding-bottom: 9px;
}


/*Home*/

.tpLogin {
  text-align: center;
  border: 1px solid black;
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#username,
#password {
  max-width: 80%;
  margin-bottom: 20px;
  border: 2px solid black;
  padding: 5px 10px;
}

#btnSubmit {
  width: 40%;
  padding: 5px 20px;
  background-color: #404040;
  color: #f7f7f7;
}

.login {
  margin-bottom: 20px;
}

.banner {
  width: 100%;
  height: auto;
}
.banner-wrapper {
  position:relative;
}

.homeIcons {
  font-size: 40px;
}

.homeInfo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.homeInfoHeading {
  font-size: 26px;
}

.homeInfoText {
  padding-bottom: 50px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.last {
  margin-bottom: 50px;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/pure-release-1.0.0/grids-responsive.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="navBar pure-u-5-5">
    <div class="pure-g">
      <div class="pure-u-6-24"></div>
      <a class="active pure-u-3-24 navLink" href='index.html'>
        <div class="navText">Home</div>
      </a>
      <a class="pure-u-3-24 navLink" href='about.html'>
        <div class="navText">About Me</div>
      </a>
      <a class="pure-u-3-24 navLink" href='service.html'>
        <div class="navText">Service</div>
      </a>
      <a class="pure-u-3-24 navLink" href='contact.html'>
        <div class="navText">Contact</div>
      </a>
      <div class="pure-u-6-24"></div>
    </div>
  </div>

  <div class="banner-wrapper">
    <img class="banner" src="https://s14.postimg.cc/pew1gpjgh/home2.jpg" />

    <div class="tpLogin">
      <h2>Already a Member?</h2>
      <form name="login" class="login" method="POST" action="https://home.trainingpeaks.com/login">
        <div class="validation">
        </div>
        <input class="pure-u-5-5" id="username" type="text" name="username" value="" placeholder="Username" tabindex="1" required>
        <input class="pure-u-5-5" id="password" type="password" name="password" placeholder="Password" tabindex="2" required>
        <input class="pure-u-5-5 pure-button" id="btnSubmit" name="submit" type="submit" class="buttonBlue1" value="Login" tabindex="3">
      </form>
      <h3><a href="service.html">How do I become a member?</a></h3>
    </div>
  </div>

  <div class="homeInfo pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-bullhorn homeIcons"></i>
      <h2 class="homeInfoHeading">Service</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <i class="fas fa-cogs homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Software</h2>
      <p class="homeInfoText textSplit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-3 last">
      <i class="fas fa-check-circle homeIcons iconPadding"></i>
      <h2 class="homeInfoHeading">Goal</h2>
      <p class="homeInfoText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus erat eget elit mollis, vel congue sem gravida. Vivamus ipsum ex, blandit quis neque a, vulputate sagittis lacus. Ut nec luctus ante. Cras non est massa. Fusce malesuada libero
        orci, in feugiat odio imperdiet id. Ut gravida, libero ac iaculis vestibulum, libero felis semper libero.</p>
    </div>
  </div>

</body>

</html>

＆＃13;

使用响应式图像调整内容大小

1 个答案: