1

我制作了一个标题图片，但由于某种原因，我无法让它从 CSS 中显示出来。

这是一个屏幕截图： 在此处输入图像描述

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

谢谢。

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

 } 

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

这是一个例子。但我不确定为什么它不起作用。

4

5 回答 5

9

由于 div 中没有内容，它的高度为零，所以你什么也看不到。向 div 添加一些内容height或min-height向 CSS 添加或。

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

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

于 2012-06-28T06:59:21.763 回答
5

演示

您需要提供高度，否则它将取决于内部内容的高度，即0 

 #header {
            background-image:url('http://i.imgur.com/ncTiy.png');
            width:100%;
            background-repeat:no-repeat;
            height:200px;
     }
于 2012-06-28T06:57:33.243 回答
1

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

于 2012-06-28T07:03:46.360 回答
1 
#header {
    background-image:url('../emailheader.png');
    width:100%;
    height:100%;
    background-repeat:no-repeat;

}

html{height:100%;}

body{height:100%;}

可以在没有 div#header 内容的情况下工作，或者将一些内容放入 div 或使用 min-height ，它会起作用。

谢谢你

于 2012-06-28T07:09:30.817 回答
0

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

  1. 首先没有附加样式表
  2. header用于标识两个不同的元素。（Blaster也提到过）

但是，它没有出现在 tinkerbin 中的主要原因div是它既不包含任何元素，也没有固定的尺寸。检查您的垃圾箱的此更新。

于 2012-06-28T06:58:51.997 回答