我在调整图像 (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>最佳答案
考虑到您可能希望标题下方有实际的内容，而不仅仅是图像，我建议您使用 background-image CSS 属性而不是 <img>标签。这将使内容进入.banner (或类似)将能够坐在背景的顶部。
为此，您正在寻找 background-image: url('') .那，结合 background-size: cover (你已经在 .banner 上有了)，会给你背景图片，但它只会占用一小部分高度。因此，您需要指定 height ，考虑到导航栏。
这可以通过 calc() function 来完成，从100%中减去导航栏的高度.在我的代码片段中，这是 96px ，但请注意，您实际上并未为导航栏指定固定高度。因此，您可能需要使用 media queries 在不同的分辨率下调整此“偏移量”。
最后，您需要删除 margin-top: -10px 来自 .banner以便它与您的导航栏“齐平”。
所有这些都可以在下面看到:
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);
}
}<!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>此外，顺便说一句，您有一个错误的 </script>在 Font Awesome 引用的末尾标记 :)
关于html - 背景图片不动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48995646/