Question

CSS一直在播放，我只是在我的基本网站上添加图像变得很困难。我正在加载它在正确的路径，它是在正确的路径。我构建它的方法是放置一个空白div并给它一个带有此ID的ID我在CSS上编辑它并加载图像作为背景图像，但是，当然它没有加载。当我运行服务器并使用chrome的开发工具时，我发现CSS已找到图像（甚至显示图像的缩略图！）但仍未加载任何内容。

相关HTML：

{% load staticfiles %}    
    <head>
    <link rel="stylesheet" type="text/css" href="{% static 'QMS/styles.css' %}" />
    <script type="text/javascript" src="{% static 'QMS/jquery-1.4.2.min.js' %}">
    </script>
    <script language="JavaScript" type="text/javascript" src="{% static 'QMS/jscript.js' %}"></script>
    </head>

    <body>
    <div id = inputImg></div>
    <div id = outputImg></div>
    <div id = leadershipImg></div>
    <div id = supportImg></div> 
    <div id = circle></div>

相关CSS：

#inputImg{
    background-image: url('../QMS/images/inputs.jpg') !important;
    background-repeat: no-repeat;
    position: absolute;
    left: 50px;
    top: 40px;
    z-index: -1;
}

#outputImg{
    background-image: url('../QMS/images/outputs.png');
    background-repeat: no-repeat;
    position: absolute;
    right: 50px;
    top: 40px;
    z-index: -1;
}

#leadershipImg{
    background-image: url('../QMS/images/leadership.png');
    background-repeat: no-repeat;
    position: absolute;
    left: 42%;
    top: 80px;
}

#supportImg{
    background-image: url('../QMS/images/support.png');
    background-repeat: no-repeat;
    position: absolute;
    left: 40%;
    bottom: 40px;
 }

这是开发工具内部的截图。（忽略我在命令行中输入内容而没有意识到的错误）

这些是我用于CSS和图像的途径，在我用来包含CSS文件的单独CSS文件夹中，但我更改了它以进行测试，并且在其当前位置似乎工作得最好。（将其放入CSS文件夹对错误没有影响）

所以这是最终的图像，这就是我的网站的样子，你可以看到它缺少CSS应该加载的图像/框。

任何帮助将不胜感激!!欢呼声。

图片已加载到Chrome开发工具中但未加入网站

0 个答案: