css - CSS背景图像不起作用

Question

对于我的生活，我无法弄清楚为什么我的背景图像不会出现。文件路径正确。这是 HTML：

 <section class="banner_area">
      <p>Hi, I'm a <span>Front-End Web Developer</span> 
          who makes clean and responsive designs come to life.
      </p>
</section>

和 CSS ：

.banner_area {
    background-image:url("images/banneralt4.jpg");
    height:600px;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    position:relative;
}

它在我的另一个上运行良好。基本相同的代码。如果我要设置背景颜色，它会显示得很好。

Answer 1

图像位置是相对于 CSS 文件的。根据您的解释，您的文件夹结构如下：

• 根文件夹
  • css
  • 图片
  • 脚本

由于 css 文件夹与 images 文件夹处于同一级别，因此您需要上一层才能访问 images 文件夹中的图像。因此，图像在您的 css 中的位置应该是：

background-image:url:("../images/banneralt4.jpg");

将图像直接添加到 HTML 时起作用的原因images/banneralt4.jpg是图像文件夹是根文件夹的子文件夹。

Answer 2

看起来您在 CSS 文件夹中。在您的文件路径中退出文件夹并指向图像（我怀疑图像文件夹在您的 CSS 文件夹中）

background-image:url("../images/banneralt4.jpg");