html - 背景图像垂直滚动但粘在容器的一侧

Question

我有一个宽度为 1080 像素的标准容器。我想要一个 float 图像出现在容器的右侧，但是当您向下滚动时，图像也会向下滚动。我还希望 float 图像即使在调整窗口浏览器大小时也能粘在容器的右侧。

我试过将父 div 放在相对位置，将 float 图像放在绝对位置，图像将停留在父 div 的右侧，但是当我向下滚动时，它会保持相同的位置，而不是向下滚动。

这是我到目前为止使用的代码 -

CSS -

.santa-wrapper{
position: relative;
width: 1200px;
margin: 0 auto;
}

.santa{
background-image: url("images/santa-head.png");
background-repeat: no-repeat;
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: 1;
}

.santa-body{
background-image: url("images/santa-body.png");
background-repeat: no-repeat;   
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: -1;
}

HTML -

<div class="santa-wrapper">
<div class="santa"></div>
<div class="santa-body"></div>
</div>

Answer 1

要让背景图像固定在右下角，您需要将这段代码添加到您的 CSS 中。

background-position: right bottom;

要使 div 向下滚动，我认为您需要包含一些 Javascript。