HTML/CSS--创建横幅/标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18423004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS--Creating a banner/header
提问by user2714330
I've got a horizontal image as a GIF and JPG. It is something I made with Paint--a text logo with an image on a solid background.
我有一个水平图像作为 GIF 和 JPG。这是我用 Paint 制作的东西——在纯色背景上带有图像的文本徽标。
I am having a lot of trouble trying to get it to display as a banner/header.
我在尝试将其显示为横幅/标题时遇到了很多麻烦。
So far, I am only able to get the solid background to show up. The text/logo mysteriously disappears. The solid background extends to the full screen over my background image, and I want that, but obviously, with my text/logo showing up.
到目前为止，我只能让纯色背景显示出来。文字/标志神秘地消失了。纯色背景在我的背景图像上延伸到全屏，我想要这样，但很明显，我的文本/徽标会显示出来。
This is the code I am using:
这是我正在使用的代码：
<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>
I think there may be something wrong with my image. I tried this using a different image, and it worked, but my text was stretched.
我想我的形象可能有问题。我尝试使用不同的图像进行此操作，并且有效，但是我的文本被拉伸了。
How do I create a banner with a logo that doesn't stretch when I use this code??
当我使用此代码时，如何创建带有不会拉伸的徽标的横幅？
采纳答案by RGLSV
You have a type-o:
你有一个 o 型：
its: height: 200x;
它的： height: 200x;
and it should be: height: 200px;also check the image url; it should be in the same directory it seems.
它应该是：height: 200px;还检查图像网址；它应该在同一个目录中。
Also, dont use 'px' at null (aka '0') values. 0px, 0em, 0% is still 0. :)
此外，不要在空（又名“0”）值处使用“px”。0px, 0em, 0% 仍然是 0。:)
top: 0px;
is the same with:
与以下相同：
top: 0;
Good Luck!
祝你好运！
回答by Jeffpowrs
Remove the z-index value.
删除 z-index 值。
I would also recommend this approach.
我也会推荐这种方法。
HTML:
HTML：
<header class="main-header" role="banner">
<img src="mybannerimage.gif" alt="Banner Image"/>
</header>
CSS:
CSS：
.main-header {
text-align: center;
}
This will center your image with out stretching it out. You can adjust the padding as needed to give it some space around your image. Since this is at the top of your page you don't need to force it there with position absolute unless you want your other elements to go underneath it. In that case you'd probably want position:fixed; anyway.
这将使您的图像居中而不会拉伸它。您可以根据需要调整填充以在图像周围留出一些空间。由于它位于页面顶部，除非您希望其他元素位于其下方，否则您无需将其强制设置为绝对位置。在这种情况下，您可能需要 position:fixed; 反正。
回答by Karel B.
Remove the position: absolute;attribute in the style
移除 位置：绝对；样式中的属性
回答by Sanjay Ursal.
For the image that is not showing up. Open the image in the Image editor and check the typeyou are probably name it as "gif" but its saved in a different format that's one reason that the browser is unable to render it and it is not showing.
For the image stretching issue please specify the actual width and height dimensions in #bannerinstead of width: 100%; height: 200pxthat you have specified.
对于未显示的图像。在图像编辑器中打开图像并检查type您可能将其命名为“gif”，但它以不同的格式保存，这是浏览器无法呈现它并且未显示的原因之一。
对于图像拉伸问题，请指定实际的宽度和高度尺寸，#banner而不是width: 100%; height: 200px您指定的尺寸。
回答by Stuart Miller
Height is missing a p from its value.
高度在其值中缺少 ap。
Should be height:200*p*x
应该是高度：200* p* x
