元素移动，背景调整大小

Question

我目前正在建设一个单页滚动网站。

在第二页上，我使用了background-size:cover属性的背景。基本上，我想要一个元素坐在背景顶部，但在调整大小时与背景相应移动，即使这意味着元素移动出视口。

这可能吗?

我已经试过了:

.background {
width:100%; 
height:100vh; 
margin:0;
background-image: url('Studio.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 80% 0%;
overflow: hidden;
position: relative;
z-index: 1;
}
#image {
height: 100%;
width:100%;
background-image: url('lamp.png');
background-repeat: no-repeat;
background-size: auto;
position: absolute;
}

为了更好地解释我想要实现的目标，我已经模拟了一个图表:

第一个图显示了布局在全尺寸视口中的样子。第二张图显示了我想要的布局，当视口调整大小…图像元素相对于背景移动，在视图口之外。

链接到第一张图

链接到第二个图表

Answer 1

听起来像是视差滚动或position:fixed on your element