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");

css背景图像不会工作

2 个答案: