背景图片不显示 [英] Background images not appearing

查看:92
本文介绍了背景图片不显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我这里有我的代码html和css。我似乎没有捕捉到为什么我的图片不会加载或显示的问题。我尝试他们在firefox和chrome上加载。

I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.

我的问题不在jsfiddle。

My problem is not on jsfiddle.

是我的文件夹结构:


  • localhost / website / img

  • localhost / website / css

  • localhost / website

http://jsfiddle.net/p8eS3/1/

<!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);
}


推荐答案

'作为背景图像添加为div,但那些div没有布局,因为侧边栏缺乏高度和徽标的高度和宽度。这意味着他们根本没有出现。给它们高度/宽度来修复它。

You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.

如果图片的路径不正确。

If not the paths to the images are wrong.

这篇关于背景图片不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆