gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:51:29 26 4
gpt4 key购买 nike

我有一个宽度为 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>

最佳答案

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

background-position: right bottom;

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

关于html - 背景图像垂直滚动但粘在容器的一侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33740291/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com