6

我有一个水平图像作为 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>

我觉得我的形象可能有问题。我尝试使用不同的图像，它有效，但我的文本被拉伸了。

如何使用此代码创建带有不拉伸徽标的横幅？

4

5 回答 5

4

你有一个类型-o：

它的：height: 200x;

它应该是：height: 200px; 还要检查图片网址；它应该在同一个目录中。

此外，不要在空值（又名“0”）处使用“px”。0px, 0em, 0% 仍然是 0。:)

top: 0px;

与以下内容相同：

top: 0;

祝你好运！

于 2013-08-24T21:03:09.177 回答
2

删除 z-index 值。

我也会推荐这种方法。

HTML：

<header class="main-header" role="banner">
  <img src="mybannerimage.gif" alt="Banner Image"/>
</header>

CSS：

.main-header {
  text-align: center;
}

这将使您的图像居中而不会拉伸它。您可以根据需要调整填充以在图像周围留出一些空间。由于这是您页面的顶部，因此您无需使用绝对位置强制它在那里，除非您希望其他元素位于其下方。在这种情况下，您可能需要 position:fixed; 反正。

于 2013-08-24T21:20:22.703 回答
1

删除 位置：绝对； 样式中的属性

于 2014-10-24T15:31:44.840 回答
0

对于未显示的图像。在图像编辑器中打开图像并检查type您可能将其命名为“gif”，但它以不同的格式保存，这是浏览器无法呈现它并且它没有显示的原因之一。
对于图像拉伸问题，请指定实际的宽度和高度尺寸，#banner而不是width: 100%; height: 200px您指定的尺寸。

于 2014-09-23T05:25:14.820 回答
0

高度从其值中缺少 ap。

应该是高度：200* p *x

于 2013-08-24T20:54:57.277 回答