html - 固定位置 div 上的固定背景图像

Question

我想创建一个看起来像这样的效果:

期望的效果:

我使用粘性 div 创建标题矩形并尝试将背景附件设置为固定，但这不起作用，因为背景固定到正在移动的 div。有人知道我该如何实现吗？

这是我当前的 CSS:

.headerdiv {
    position: sticky;
    top: 0;
    height: 200px;
    background-image: url(res/header-bg.png);
    background-attachment: fixed;
    z-index: 1;
    text-align: center;
    color: white; 
}

和我的 html:

<div class="headerdiv">
    <img class="logoimg"  src="res/logo.png"></img>
</div>

Answer 1

您将需要 javascript 来执行此操作。 Here's an answer到一个类似的问题。在您的情况下，您需要影响元素的 background-position 而不是 top;

如果您需要进一步的帮助，请将您的代码放在一个片段中，我会编辑我的答案以更具体地针对您的情况。

编辑:这是一个更新后的 fiddle ，应该可以满足您的需求。

https://jsfiddle.net/h9vbmc8x/