将大型日志堆叠到多个 CSS 中

Question

我有一个基本的网页设计，它有一个页眉、一个中间框（页眉下方的一个大方形框）和一个页脚。

我还有一个同时占据中间和页眉的徽标，所以我很难弄清楚如何正确分割我的图像。中间和表头都是纯色，但标志更广泛。有没有办法对这种样式进行 CSS 并将徽标放在多个 CSS 之上？它不是一个方形徽标，所以我不能在 Photoshop 中将其切片。

谢谢！

CSS：

* {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    height: 1.1in;
    width: 100%;
    background-color: #0277bc;
    position: relative;
}
#wrapper #logo {
    position: relative;
    top: 200px;
    left: 200px;

}

Answer 1

使用 position:absolute 执行此操作。

假设您的所有内容都有一个带有 id 的包装器

#wrapper {position: relative;}

然后给你的 logo 一个 id 并相对于包装的左上角定位它

#logo {position: absolute; top: 200px; left: 200px;}

举个例子。

如果徽标在任何地方覆盖网站内容，您可能需要将徽标设为 png

Answer 2

作为绝对定位的替代答案：负边距。

如果您的标题是 100 像素高，而您的徽标是 150 像素高，您可以使用以下方法将徽标垂直居中：

#logo
{
  margin: -25px 0;
}

这将允许您将 img 与 text-align 对齐，或使其与文本内联。