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

时间:2018-01-04 12:12:12

标签: html css

我试图在我的本地环境中克隆网站。出于某种原因,即使路径正确,背景图像也不会显示,如下面的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;
}

background img path

4 个答案:

答案 0 :(得分:1)

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

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

你需要给它一个高度。

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

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

答案 1 :(得分:1)

问题是如果父母没有身高,100%的身高是没用的。

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

(100%的视口意味着你必须滚动以查看完整的图片,因为你的导航栏)

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



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

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

  <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;

答案 2 :(得分:0)

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

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

答案 3 :(得分:-1)

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

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