在 header 中定位图像

Question

我想 position 里面的图像 header。 目前，显示图像的顶部，我想显示图像的中间部分。 top属性使图像剪辑在父框上。 请看一下我的代码。

HTML：

<body>
    <header class="header">
        <div class="header-inner">

        </div>
    </header>
</body>

CSS：

.header {
    position: relative;
    width: 100%;
    height: 20%;
    background-color: grey;
}

.header-inner {
    position: absolute;
    background-image: url(../images/img.jpg);
    width: 100%;
    height: 100%;
}

Answer 1

如果要显示图像的中间部分，可以在.header-inner上使用background-position 。 您可以指定自定义百分比或简单地将其center 。

background-position: center;

Answer 2

如果您设置position: absolute那么块将超过其他块。 所以只需设置z-index: -1; 到.header-inner