请帮我找出为什么我的背景图像没有显示。 代码确实在web页面上创建了一个div,但是图像只是没有显示出来。 我插入html img标记,看看图像是否工作良好,它确实工作良好,所以我认为这一定是CSS部分出了问题。
>
这是我的html代码
<section id="experience">
<div class="experience-photo">
</div>
<div class="experience">
<h2>In the process of understanding society</h2>
<div>
<div class="">
<img src="Images /UBC.jpeg" alt="ubc">
</div>
<div class="">
<a href="https://www.ubc.ca/">The University of British Columbia</a>
<h3>B. S. in Sociology with minor in Business, class of 2020</h3>
<h3>Vancouver,Canada</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
这是我的CSS代码
.experience-photo {
height: 100vh;
background-image: url("images /Experience.JPG");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
作品
.experience-photo {
height: 100vh;
background-image: url("https://miro.medium.com/max/6756/1*5yjpWuKh2tQFMlkFdQy-rA.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
<section id="experience">
<div class="experience-photo">
</div>
<div class="experience">
<h2>In the process of understanding society</h2>
<div>
<div class="">
<img src="https://lh3.googleusercontent.com/proxy/noQ19SshsZpB05KNJyifaxMYfmOGa_8_heMljhfFkhRclxDMqiw4aqFRiGeEDdil_qpG2DYMtUe-RQCf--kP5hDD0E2VYqeDU8tzbazfW7Ye4v5LhvANdRUh8hBhJh_o3_DRzk0eM0mnQ6-CaBvw" alt="ubc">
</div>
<div class="">
<a href="https://www.ubc.ca/">The University of British Columbia</a>
<h3>B. S. in Sociology with minor in Business, class of 2020</h3>
<h3>Vancouver,Canada</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
如果文件夹名称中没有空格,请删除“images/experience.jpg”中图像后面的空格。 肯定会管用的。