虽然路径正确，但背景图像不起作用

Question

我试图在我的本地环境中克隆网站。出于某种原因，即使路径正确，背景图像也不会显示，如下面的jpg所示。

该照片与index.html和style.css位于同一文件夹中。 css如下：

.wallpaper {
    background-image:url('jobbatical-1-wallpaper.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 100%;
}

.navbar {
    overflow: hidden;
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.navbar a {
    float: left;
    display: block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

Answer 1

你的div没有高度。你可以告诉，因为你可以在它下面看到段落的位置。

由于它没有高度，因此没有像素可以显示背景图像。

你需要给它一个高度。

你试过给它height: 100%，但是当父元素的高度为height: auto时，百分比高度意味着auto（即内容的高度，你没有）默认情况下body元素。）

如果你想在占用其他元素之后让div占用剩余的垂直空间，请查看 flexbox 以获取布局。 Holy Grail layout是一个相当极端的例子。

Answer 2

问题是如果父母没有身高，100％的身高是没用的。

您想要图像的高度是多少？ 100％的视口或只是填充页面？

（100％的视口意味着你必须滚动以查看完整的图片，因为你的导航栏）

以下是图像的代码应该复制视口的高度： （编辑：也许你应该将图像的高度设置为100vh而不是身体高度）

＆＃13;

＆＃13;

html,
body
{
  height: 100%;
  margin: 0px;
}

.navbar
{
  background-color:green;
  height:50px;
}
.image
{
  height: 100%;
  background-image: linear-gradient(black,gray);
}

＆＃13;

  <div class="navbar"></div>
  <div class="image"></div>  

＆＃13;

＆＃13;

＆＃13;

如果您想填充父级（使用flex），这是代码：

＆＃13;

＆＃13;

body
{
  margin: 0px;
}
.viewport
{
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.navbar
{
  background-color: green;
  height: 50px;
}
.image
{
  background-image: linear-gradient(black,gray);
  flex-grow: 1;/*This will make the image to fill the parents space*/
}

＆＃13;

<div class="viewport">
  <div class="navbar"></div>
  <div class="image"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

网址中不允许使用空格字符。 因此，在使用%20而不是空格调用空格时，您要么不使用空格，要么使用encode空格。 我个人使用 - 或_代替。

Stackoverflow: "href syntax : is it okay to have space in file name"

Answer 4

尝试重命名您的图片文件：将空格更改为下划线或破折号，例如jobbatical-1-wallpaper.jpg并更改路径中的名称。

如果文件名包含空格，浏览器可能会出现问题。