它甚至不会出现在 Chrome 检查器中。我做错了什么，但不知道是什么。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS & Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="css/stylesheet.css">
<!-- scripts -->
</head>
<body>
<div class="wrapper">
<header>
<div id=="container header_div">
</div>
</header>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
CSS 是:
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
background-image: url(../images/header_background.jpg);
background-position: center;
background-size: cover;
}
我已经在 css 中添加了所有背景属性并且 div 有一个大小。
我的文件结构是这样的:
最佳答案
我发现有几件事可能会导致该问题:
- 这里有两个相等:
<div id=="container header_div">.应该 单例。另外，我在 id 中看到两个单词由 空间。 ID 不能像类一样链接，这不是有效的 句法。由于您设置了#header_div 样式，div 上的 id 属性 应该是 id = "header_div"。 - 图像的相对路径以两个点开头。结果，您跳出当前目录。由于您的图像文件夹位于 与 page.html 相同的目录，文件路径应为: url(/images/header_background.jpg);
- 要查看图像，您还需要在 #header_div 元素中声明高度。
通过这样做，我能够在测试中看到背景图像。我希望这会有所帮助。
关于html - 背景图像未显示在 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41784273/