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

【问题标题】：HTML/CSS--Creating a banner/headerHTML/CSS--创建横幅/标题
【发布时间】：2013-08-24 20:51:35
【问题描述】：

我有一个 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>

我认为我的图像可能有问题。我尝试使用不同的图像进行此操作，效果很好，但我的文字被拉伸了。

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

【问题讨论】：

将height: 200x;更改为height: 200px;
谢谢，其他人也发现了这一点。我修复了它，但这给了我同样的东西。
你为什么使用 z-index: -1？这将把它推到其他元素之下。您可以在 z 轴上想象它们。
设置left 和right 以及width:100% 是多余的，可能会产生冲突。

标签： html css header banner

【解决方案1】：

你有一个类型-o：

它：height: 200x;

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

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

top: 0px;

与以下相同：

top: 0;

祝你好运！

【讨论】：

谢谢 Crisy。我修正了你所说的，但它给了我同样的东西。也许我的图像本身有问题......？
感谢 Crisy。我稍微改变了我的问题。我想要的图像没有完全显示出来。
您可以使用 .svg 徽标代替 .png 或 .gif；
或者使用css生成的logo；此外，如果您在该 img 标签周围添加包装器，您可以为图像指定 100% 的最大宽度，并为包装器指定 100% 的宽度
感谢 Crisy。我找到了解决这个问题的方法，首先放入一个 div id = header 然后上面的代码只使用一个纯色条。

【解决方案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;无论如何。

【讨论】：

谢谢杰夫！是的，就居中而言，这看起来很棒，但是我在纯色背景上的文本/徽标仍然没有显示出来。仅显示纯色背景。你知道为什么吗？再次感谢。
我在上面发表了关于删除 z-index 值的评论。你把那个去掉了吗？你用它干什么？
我删除了它，但它给了我同样的东西。我使用它是因为我在示例代码中看到了它。谢谢。
图片的路径是正确的还是输入错误？在这种情况下，它应该就在您的 html 文件旁边。

【解决方案3】：

移除样式中的position: absolute;属性

【讨论】：

【解决方案4】：

Height 的值少了一个 p。

应该是高度：200*p*x

【讨论】：

谢谢斯图尔特。我解决了这个问题，但它仍然给了我同样的东西。 :(

【解决方案5】：

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

【讨论】：