背景图像不在线显示

Question

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:。依然没有。

希望你们能帮帮我!!

Answer 1

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

• 该文件位于正确的位置;
• CSS正确引用它。

作为参考，当前设置CSS的方式是，它尝试从http://stilld.nl/2014/images/branding.png加载此图片。尝试点击该链接，您会看到它返回404'未找到'错误页面。

Answer 2

我认为您提供的路径在部署的网站上不匹配。 尝试将图像路径设为

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

而不是

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

可能会有效

Answer 3

您应确保相对于您正在使用的网址，图片位于正确的文件夹中。

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

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

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

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