提问者:小点点

背景图像不显示CSS


请帮我找出为什么我的背景图像没有显示。 代码确实在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;
    
     }
    

  • 共2个答案

    匿名用户

    作品

     .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”中图像后面的空格。 肯定会管用的。