Question

我这里有我的html和css代码。我似乎没有抓住为什么我的图像不会加载或显示的问题。我尝试将它们加载到firefox和chrome上。

我的问题不在于jsfiddle。

这是我的文件夹结构：

localhost / website / img
本地主机/网站/ CSS
本地主机/网站

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="description" />
        <meta name="author" content="author" />
        <link href="css/index.css" rel="stylesheet" type="text/css" />

        <title>Title</title>

    </head>

    <body>
        <div id="container">
            <div id="sidebar">
                <div id="logo"></div>
            </div>
        </div>
    </body>

</html>

@charset "utf-8";
/* Body */

#body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    background: #ccc;
}

/* Container */

#container {
    width: 100%;
    background: #000;
}

/* Sidebar */

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40%;
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background-image: url(../img/logo.png);
}

Answer 1

图片未加载，因为jsfiddle无法识别../img/sidebar.png，因为它会在本地服务器上显示。

我认为这不是您最初的问题，并且您在应用程序上找到正确的路径时遇到问题。

我建议“生根”您的图片网址，以便它可以从根文件夹工作到以下位置：

background: url(/img/sidebar.png) repeat-y;

Answer 2

你有两张图片，它们被添加为div的背景图片，但是这些div没有布局，因为侧边栏缺少高度和徽标高度和宽度。这意味着他们根本没有出现。给它们高度/宽度来修复它。

如果没有，图像的路径是错误的。

Answer 3

可能是您的文件夹结构。文件夹中的图像与html文件的级别是否相同，或者是级别。如果它们处于同一级别，请尝试使用./images替换../images

Answer 4

您的图片路径很可能已关闭。这将很难通过js小提琴调试。你可以发布你的目录结构吗？

Answer 5

这是因为你的div实际上没有占用任何空间，所以你看不到任何背景。有关如何解决此问题的示例，请参阅your modified fiddle。

或者，您可能需要考虑使用HTML img tags。

Answer 6

您必须为width元素指定height和#logo，以便BG可以显示。

Answer 7

尝试，

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40px;   /* your background width */
    height:60px;    /* your background height */
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background: url(../img/logo.png) 0 0 no-repeat;
    width: 40px;   /* your logo width */
    height:60px;    /* your logo height */
}

背景图像没有出现

7 个答案: