CSS 图像背景 Position

Question

我想要这样的布局。 请看一下图片

在此处输入图像描述

如您所见，我有顶栏和页脚栏。 由于页脚栏是实心栏，我可以只使用 div 并填充纯色。

但是对于顶栏，我必须使用图像作为 div 内的背景。 这是顶栏的图像。

在此处输入图像描述

我想要做的是，黑色方形框（徽标）应固定在右上角，并且该栏应根据屏幕宽度重复。

请为我提供顶部栏的 css。 谢谢你。

编辑：对不起我的粗心。 这是我的代码。

<html>
<head>
</head>
<body style="margin:0px">
<div style="width:100%; height:100%">
<div style="position:absolute; top:10px; background:url(bglogo.png); width:100%; height:100px"></div>
<div style="position:absolute; bottom:0px; width:100%; height:20px; background:#000"></div>
</div>
</body>
</html>

Answer 1

不要为整个顶部栏使用图像。 以与底栏完全相同的方式处理它，但有一些补充。

您应该按照我的建议进行操作，因为徽标应该是可点击的链接。

HTML 应该与此类似：

<div id="topBar">
    <a id="logo" href="/"><img src="logo.png" alt="whatever" /></a>
</div>

有了这个 CSS：

#topBar {
    position: relative;
}
#logo {
    position: absolute;
    top: -10px;
    right: 0
}

Answer 2

要放置黑色方框，您可以在相对 position 标签内使用绝对 position。 放置精确的像素位置并设置 z-index 来决定前面的内容。

您还可以将 class 用于带有负边距的盒子以放在 ligne 上。

CSS 图像背景 Position

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-08-12 13:22:01

解决方案2
0 2011-08-12 13:24:54

CSS 图像背景 Position

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-08-12 13:22:01

解决方案2 0 2011-08-12 13:24:54

解决方案1
1 已采纳 2011-08-12 13:22:01

解决方案2
0 2011-08-12 13:24:54