我试图在我的本地环境中克隆网站。出于某种原因,即使路径正确,背景图像也不会显示,如下面的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;
}
答案 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;
如果您想填充父级(使用flex),这是代码:
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;
答案 2 :(得分:0)
网址中不允许使用空格字符。
因此,在使用%20
而不是空格调用空格时,您要么不使用空格,要么使用encode空格。
我个人使用 - 或_代替。
Stackoverflow: "href syntax : is it okay to have space in file name"
答案 3 :(得分:-1)
尝试重命名您的图片文件:将空格更改为下划线或破折号,例如jobbatical-1-wallpaper.jpg并更改路径中的名称。
如果文件名包含空格,浏览器可能会出现问题。