CSS背景图像不起作用答案

【问题标题】：css background image wont workCSS背景图像不起作用
【发布时间】：2015-12-09 08:46:44
【问题描述】：

对于我的生活，我无法弄清楚为什么我的背景图片不会出现。文件路径正确。这是 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;
}

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

【问题讨论】：

背景图像是否存在于它应该存在的位置？我的猜测是没有。
文件路径是相对于你的css文件的。请先检查一下。比使用浏览器的开发控制台查看网络错误。
或者如果确实存在，您是否在上传文件之前尝试加载页面？浏览器可能已将其缓存为损坏。
你的文件路径明显不对>jsfiddle.net/5UdXn，或者服务器无法访问...
我的图片路径是正确的。如果我在 HTML 中使用它作为它会显示出来。这只是 css 背景图像

标签： css background-image

【解决方案1】：

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

根文件夹
- CSS
- 图片
- 脚本

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

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

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

【讨论】：

啊，它奏效了。感谢您的详细解释。永远不会想到这一点。我认为当人们输入“../”时，他们会将其用作缺少的文件夹路径或其他东西。不知道是字面意思。我会投票给你，但我没有足够的声誉
这跟我的回答一模一样
是的，但他解释得更好。对不起

【解决方案2】：

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

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

【讨论】：

我的主文件夹有一个 css 文件夹、一个 images 文件夹和一个 script 文件夹。例如，我可以很好地加载其他图像，例如我的徽标。文件路径必须正确。所以你是对的。它们不在我的 CSS 文件夹中。