HTML/CSS--创建横幅/标题

use*_*330 6 html css header banner

我有一个水平图像作为 GIF 和 JPG。这是我用 Paint 制作的东西——在纯色背景上带有图像的文本徽标。

我在尝试将其显示为横幅/标题时遇到了很多麻烦。

到目前为止,我只能让纯色背景显示出来。文字/标志神秘地消失了。纯色背景在我的背景图像上延伸到全屏,我想要这样,但很明显,我的文本/徽标会显示出来。

这是我正在使用的代码:

<style>
body {
  background: url("mybackgroundimage.gif") repeat;
}
#banner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 200px;
  z-index: -1;
}
</style>
</head>
<body>
  <img id="banner" src="mybannerimage.gif" alt="Banner Image"/>
</body>
Run Code Online (Sandbox Code Playgroud)

我想我的形象可能有问题。我尝试使用不同的图像进行此操作,并且有效,但是我的文本被拉伸了。

当我使用此代码时,如何创建带有不会拉伸的徽标的横幅?

RGL*_*LSV 4

你有一个错字:

您目前拥有:height: 200x;

它应该是:height: 200px;

还要检查图像网址;它看起来应该在同一个目录中。

另外,请勿在 null(也称为“0”)值处使用“px”。0px、0em、0% 仍然是 0。:)

top: 0px;
Run Code Online (Sandbox Code Playgroud)

与以下内容相同:

top: 0;
Run Code Online (Sandbox Code Playgroud)

祝你好运!