为什么背景图片没有加载我的css文件

Question

我正在尝试加载背景图像，因此我使用 CSS 背景图像 URL，但它不起作用，这意味着它没有加载。

.home {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-image: url(../wordpress/img/online-training.jpg);
  background-size: cover;
  background-position: center;
}

<section class="home" id="home">
  <div class="content">
    <span>Take The Right Step <br>For Your Business</span>
    
    <p>Tax associate is a leading consultancy firm that provides simple, effective company registration and accounting solutions to enterprises in ireland</p>
    
    <a href="#" class="btn">Get Started</a>
  </div>
</section>

Answer 1

看起来 URL 可能不正确。尝试使用完整的 URL 并查看它是否加载，例如

https://website.com/wordpress/img/online-training.jpg

。如果这有效，那么您正在使用的相对 URL 语法可能需要调整，例如

/wordpress/img/online-training.jpg

。

无需引号即可工作，但最好按照下面的建议将它们包含在内。

Answer 2

您的链接有误 如果你想从互联网上获取图片而不下载它
您应该右键单击图片复制图像地址并粘贴到例如

 .home {
display: flex;
align-items: center;
min-height: 100vh;
 background-image: url(https://images.unsplash.com/photo-1615789591457- 74a63395c990?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmFieSUyMGNhdHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80);  
background-size: cover;
background-position: center;`

希望有帮助:)

Answer 3

您的 css 背景图像 URL 中缺少双引号：

CSS：

background-image: url("../wordpress/img/online-training.jpg");

此外，您应该检查文件的路径。