Question

我的标题图片无法显示的原因是什么？（对未来的任何建议将不胜感激！）

下面你会看到我目前的语法。我想添加一个jsfiddle链接，但由于所有内容都指的是我在计算机上的图像，我认为上传整个文件夹会更容易。 HERE是指向该

的链接

HTML

<head>
    <title>index</title>
    <link href="style.css"  rel="stylesheet"  type="text/css" />
</head>
<body>
    <div id="container">    
        <div id="header"></div><!-- end header -->

        <div id="menu">
            <ul>
                <li><a href="index.php"><img border="0" id="homebutton" alt="" src="img/home button.png" width="145px" height="auto"></a></li>
                <li><a href="about.php"><img border="0" id="aboutbutton" alt="" src="img/about button.png" width="145px" height="auto"></a></li>
                <li><a href="gallery.php"><img border="0" id="gallerybutton" alt="" src="img/gallery button.png" width="145px" height="auto"></a></li>
                <li><a href="contact.php"><img border="0" id="contactbutton" alt="" src="img/contact button.png" width="145px" height="auto"></a></li>
            </ul>
        </div><!-- end menu -->

        <div id="content"></div><!-- einde content -->      
    </div><!-- end container -->    
</body>

CSS

#container {
    margin: 0px auto;
    padding: 10px;
    width: 1300px;
}

#header {
    background-image: url("img/header.png");
    background-repeat: no-repeat;
    width: 1300px;
    height: auto;
    max-height: 275px;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

#menu ul li  {
    float: left;
}

Answer 1

这是因为在标题中，您只设置max-height而height设置为auto，您应该包含min-height以显示它。

Answer 2

尝试将max-height: 275px;更改为min-height:275px;

div没有内容，因此默认为0px高

Answer 3

你用图像作为背景但背景是什么？（我的意思是标题div没有大小，因此无法显示背景）

您必须增加width

的尺寸（height / <div id="header"></div>）

Answer 4

您实际height为0px，因此您无法看到它。你也需要写一个大小，比如height: 10px;或min-height: 10px。

Answer 5

在#header上，更改

 height:auto;

类似

height: 200px; //or whatever the height of your img is

此处的问题是，您的div默认为height: 0px;，因此您的图片无法展示。

或者，您需要至少在div上设置一个min-height，以便图像可以显示。

Answer 6

首先，将高度设置为header。当您设置max-height时，您说高度无法传递该数字，但您的标题为空，因此高度将为0.

其次，要小心路径。可能在您的HTML中路径为img/image.png，但您的css文件位于名为styles的文件夹中。如果是您的情况，请记住从样式文件夹background-image: url("../relative/path/to/image.png");

添加图像的相对路径

Answer 7

你的问题是css，#header样式。请尝试width:100px而不是width:auto。（例如100px）。这对我有用。

Answer 8

如果你的HTML文件是root用户，那么图片的语法就可以了，但是它可以代替：background-image: url("img/header.png");
background-image: url("/img/header.png");（注意＆＃34; /＆＃34;在网址处）

或图像的名称。或者扩展名。

为什么我的背景图片不显示？

8 个答案: