Question

我无法调整图像（folk.jpg），因此它覆盖了我的页面背景，就在导航栏的下方。我试过调整大小，但似乎不想做任何事情。我想知道我的CSS中是否有东西阻止我调整图像。这是代码：

body,
html {
  height: 100%;
  margin: 0;
}

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-position: center;
  background-size: cover;
  margin-top: -10px;
}

<link rel="stylesheet" href="://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">

<div class="topnav">
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="search" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <a class="active" href="#about">ABOUT</a>
  <a href="#news">NEWS</a>
  <a href="#events">EVENTS</a>
  <a href="#contact">CONTACT</a>
</div>

<div class="banner">
  <img class="imgheader" src="/Users/Desktop/folk.jpg" alt="folk band">
</div>

Answer 1

考虑到您可能希望在标题下方有实际内容，而不仅仅是图片，我建议您使用 {{3 }} CSS属性而不是<img>标记。这将使得输入.banner（或类似）的内容能够位于后台的顶部。

为此，您正在寻找background-image: url('')。结合 background-image （您已在.banner上提供），它会为您提供背景图片，但它只会占据高度的一小部分。因此，您需要指定 background-size: cover ，并考虑导航栏。

可以使用 height 来完成此操作，从100%中减去导航栏的高度。在我的代码段中，这是96px，但请注意，您实际上并未指定导航栏的固定高度。因此，您可能希望使用 calc() function 来调整此偏移量＆＃39;在不同的决议。

最后，您要删除.banner中的 media queries ，以便它能够“冲洗”＆＃39;反对你的导航栏。

所有这些都可以在以下内容中看到：

＆＃13;

body,
html {
  height: 100%;
  margin: 0;
}

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-image: url('http://placehold.it/100');
  background-position: center;
  background-size: cover;
  height: calc(100% - 96px);
}

@media screen and (min-width: 768px) {
  .banner {
    height: calc(100% - 48px);
  }
}

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="indyfolk.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
  <script src=""></script>
  <title>Indy Folk News</title>
</head>

<body>

  <div class="topnav">
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="search" name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <a class="active" href="#about">ABOUT</a>
    <a href="#news">NEWS</a>
    <a href="#events">EVENTS</a>
    <a href="#contact">CONTACT</a>
  </div>
  <div class="banner">
  </div>
  
</body>

</html>

＆＃13;

此外，另外，您在Font Awesome引用的末尾有一个错误的</script>标记：）

背景图像不移动

1 个答案: