背景图像不在线显示答案

【问题标题】：Background-image not displaying online背景图像不在线显示
【发布时间】：2023-03-05 01:26:01
【问题描述】：

Arg，它变得令人沮丧！

Stack Overflow 上的任何解决方案都不适合我，我只是不知道为什么我的 background-image 没有显示！

我给了它一个background-color，它运行良好。离线你可以看到background-image，但是当我上传我的网站时它就不见了。当我键入图像的路径时，它会显示。所以它就在那里。

这是网站：

http://stilld.nl/2014/

深蓝色区域应该是我的标志。

#fade-it{
    background: url('../images/branding.png');
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 408px;
    height: 500px;
    opacity: 1;
    position: relative;
    overflow: hidden;
    z-index: 2000;
}

我尝试了一个荒谬的高点z-index，仍然没有。我试过opacity: 1。没有什么。我试过display: block。没有什么。我检查了路径一千次。我使用了background: 和background-image:。依然没有。

希望大家能帮帮我！！

【问题讨论】：

所以你是说你的品牌形象的位置回到了一层（从你的 css 文件中）并且在图像文件夹中。
控制台说找不到图片，好像你的文件位置不正确错误：GET stilld.nl/2014/images/branding.png404（未找到）
喂？奇怪...我会再检查一次。 @LukeDuddridge 是的。
@LukeDuddridge .css 位于 css 文件夹中。我的图像在文件夹图像中。文件夹“images”和“css”位于同一级别。所以，在我的css中，我必须后退一步，然后输入文件夹'images'。
@Jop 然而，stilld.nl/2014/images 似乎是一个有效的文件夹（403，而不是 404）——这会让人们认为图像命名不正确。

标签： css image background background-image

【解决方案1】：

文件branding.png 在您的实时服务器上不存在。检查它的位置并确保：

文件在正确的位置；
CSS 正确引用了它。

作为参考，您的 CSS 当前设置方式，它尝试从以下位置加载此图像：http://stilld.nl/2014/images/branding.png。尝试点击该链接，您会看到它返回一个 404 'not found' 错误页面。

【讨论】：

我发现了问题。您找不到branding.png，因为它被命名为Branding.png...我忘记了不使用大写字母。感谢您的帮助。
没问题，很高兴看到你解决了！如果您的问题得到解答，请记得标记正确答案。每个答案都有一个复选标记，只需单击为您回答问题的那个。这样一来，我们就可以确保将来任何人在 Stack Overflow 上遇到类似问题都能快速找到答案。

【解决方案2】：

我认为您提供的路径与已部署站点上的不匹配。尝试将图像路径指定为

background: url('./images/branding.png');

而不是

background: url('../images/branding.png');

也许这会起作用

【讨论】：

【解决方案3】：

您应该确保图像位于正确的文件夹中，相对于您使用的 URL。

../images/image.jpg的意思是“上一个文件夹，找到一个名为“images”的文件夹，并在里面使用名为“image.jpg”的图片。”

./images/image.jpg 表示“在当前文件夹中找到一个名为“images”的文件夹，并使用名为“image.jpg”的图像。

/images/image.jpg 表示进入根文件夹，找到文件夹“images”并使用“image.jpg”。

编辑：找到了。 您的图像在 /2014/images/ 中。现在你正试图让它在2014 文件夹中找到images 文件夹。您可以做的是将路径设置为： /2014/images/branding.png

【讨论】：

我发现了问题。您找不到branding.png，因为它被命名为Branding.png...我忘记了不使用大写字母。感谢您的帮助。