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;}

然后为您的徽标添加ID并将其相对于包装器的左上角放置

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

作为一个例子。

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

Answer 2

作为绝对定位的另一种选择：负边际。

如果您的标题高度为100px，并且您的徽标高度为150px，则可以使用以下方式垂直居中徽标：

#logo
{
  margin: -25px 0;
}

这样您就可以将img与text-align对齐，或者将其与文本内联。

将大徽标堆叠到多个CSS上

2 个答案: