Question

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

我认为我的形象可能有问题。我尝试使用不同的图像，但它有效，但我的文字被拉长了。

当我使用此代码时，如何创建带有不会伸展的徽标的横幅？

Answer 1

你有一个类型-o：

其：height: 200x;

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

另外，不要在null（aka'0'）值处使用'px'。 0px，0em，0％仍为0.：）

top: 0px;

与：

相同

top: 0;

祝你好运！

Answer 2

删除z-index值。

我也会推荐这种方法。

HTML：

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

CSS：

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

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

Answer 3

删除样式

中的 position：absolute; 属性

Answer 4

高度从其值中缺少一个p。

应该是身高：200 * p * x

Answer 5

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

HTML / CSS - 创建横幅/标题

5 个答案: