Html 集装箱中心固定背景

我想创建一个具有固定背景的标题。因此，我定义了以下属性：

header {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 300px;
    display: block;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

现在我有以下问题。当前，背景根据屏幕宽度和高度居中。由于标题位于顶部，因此标题的实际背景正好位于图像的顶部。此外，每次我更改屏幕高度时，标题图像部分都会更改，这不是我的目标

---

我希望图像在标题中居中（图像的中心位于标题的中心，但只有在我没有向下滚动的情况下）。此外，仅当我更改标题宽度、高度或屏幕宽度时，标题图像部分才应更改，但屏幕高度更改时，标题图像部分不应更改。

您可以依靠

vh

单元与一些

calc（）

组合使用。该中心最初是

50vh

，您希望它从顶部变成

150px

，因此我们需要翻译为

50vh-150px

。如果您希望图像在屏幕高度改变时不发生变化，但可能无法按您所希望的方式渲染，则还应去掉

封面

在演示中，我将
300px
替换为
100px


.header{
高度：100px；
边框：1px实心；
背景：
网址(https://picsum.photos/id/1014/1200/800)50%钙（50%-（50vh-50px））固定；
}
.不固定{
背景附件：首字母；
背景位置：中心；
边缘顶部：20px；
}
身体{
最低高度：200vh；
保证金：0；
}

尝试将img（标题div外）和标题div包裹起来，并使用相对/绝对位置将标题叠加在图像顶部

完成此操作后，您可以使用z-index向后推图像
谢谢，现在看起来好多了。但有一个问题仍然存在。图像的大小为1000x666像素。但我不想在更改屏幕高度时看到视口发生更改。@Matze唯一的方法是不使用“封面”。有掩护是不可能的。检查我拆下盖子的地方，好的，我知道了。非常感谢。