HTML / CSS - 创建横幅/标题
[英]HTML/CSS--Creating a banner/header
问题描述
我有一个水平图像作为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>
我想我的形象可能有问题。 我尝试使用不同的图像，但它有效，但我的文字被拉长了。
当我使用此代码时，如何创建带有不会拉伸的徽标的横幅？
5 个解决方案
解决方案1
4 已采纳 2013-08-24 21:03:09
你有一个类型o：
它的： height: 200x;
它应该是： height: 200px; 还要查看图片网址; 它应该在它看起来相同的目录中。
另外，不要在null（aka'0'）值处使用'px'。 0px，0em，0％仍为0. :)
top: 0px;
与以下相同：
top: 0;
祝好运！
解决方案2
2 2013-08-24 21:20:22
删除z-index值。
我也会推荐这种方法。
HTML：
<header class="main-header" role="banner">
<img src="mybannerimage.gif" alt="Banner Image"/>
</header>
CSS：
.main-header {
text-align: center;
}
这将使您的图像居中而不是伸展它。 您可以根据需要调整填充，为图像周围留出一些空间。 由于它位于页面的顶部，因此除非您希望其他元素位于其下方，否则不需要将其强制置于绝对位置。 在这种情况下，你可能想要位置：固定; 无论如何。
解决方案3
1 2014-10-24 15:31:44
删除位置：绝对; 风格中的属性
解决方案4
0 2013-08-24 20:54:57
高度从其值中缺失。
应该是身高：200 * p * x
解决方案5
0 2014-09-23 05:25:14
对于未显示的图像。 打开图像编辑器中的图像，检查type ，你很可能命名为“GIF”，但其保存在不同的格式，这是一个原因，浏览器无法渲染它，它没有显示。
对于图像拉伸问题，请在#banner指定实际的宽度和高度尺寸，而不是width: 100%; height: 200px width: 100%; height: 200px您指定的width: 100%; height: 200px 。
HTML和CSS中的标题横幅
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.