为什么这张图片没有显示？

Question

我制作了一个标题图片，但由于某些原因我无法通过CSS显示它。

这是一个截图：

标头与index.html文件位于同一图像目录中。出现背景图像，但不显示此标题。我在HTML中输入两次标题作为div在两个不同的位置测试它以查看它是否正常工作，但由于某种原因它没有显示，我不明白哈哈。

感谢。

#header {
        background-image:url('../emailheader.png');
        width:100%;
        height:100%;
        background-repeat:no-repeat;

 } 

<div id="header"></div>

这是example。但我不确定为什么它不起作用。

Answer 1

由于div中没有​​内容，其高度为零，因此您看不到任何内容。将一些内容添加到div或向CSS添加height或min-height。

height:100%不起作用，因为它将元素的高度设置为等于其父级的高度，并且未设置父级（#container）高度。

请参阅http://tinkerbin.com/QDAEuDUA。

Answer 2

<强> DEMO

您需要提供身高或者它取决于内容的高度， 0

 #header {
            background-image:url('http://i.imgur.com/ncTiy.png');
            width:100%;
            background-repeat:no-repeat;
            height:200px;
     } 

Answer 3

这是因为你使用100％高度和100％宽度。只需将其更改为px值。

Answer 4

#header {
    background-image:url('../emailheader.png');
    width:100%;
    height:100%;
    background-repeat:no-repeat;

}

html{height:100%;}

body{height:100%;}

可以在div＃header中没有内容的情况下工作，也可以将一些内容放到div中或使用 最小高度，它会工作。

三江源

Answer 5

查看代码的屏幕截图。我发现了两个问题。

1. 第一个地方附有 NO 样式表
2. header用于标识两个不同的元素。 （也由Blaster提及）

然而，主要的原因为什么它没有出现在tinkerbin中，是因为div既不包含任何元素也没有固定的维度。检查您的垃圾箱的this更新。