Javascript 当我将背景图像的位置固定时，为什么背景图像会消失？

好的，我的目标是设置背景图像的动画，当页面加载时，背景图像从底部向上滑动，一旦动画过度设置，背景图像的位置将被固定。据我所知，我编写的代码应该工作得很好（不过我还是个新手），但是当动画结束，javascript将position属性添加到背景图像中时，它会完全消失，它下面的所有内容都会向上移动以取而代之。有人能告诉我我的代码出了什么问题吗

HTML:

Javascript:

document.querySelector('.background__img--hero').addEventListener('animationend', posFix);

function posFix() { document.querySelector('.background__img--hero').style.position = 'fixed'; };

在您的.background\uu img--hero中，只需添加以下内容：

.background__img--hero {
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    animation: slideUp 2s 1 ease-out forwards;
}

---

或者您希望图像具有的任何宽度来设置

位置的动画：固定的
元素，不设置边距动画，而是设置位置本身的动画（在此cas
顶部
），如

我认为你的背景图像需要有一个宽度。你需要“位置：固定”做什么？你只需要给你的img加一个宽度<代码>宽度：100%
好的，结果我有点大脑放屁，混淆了位置：固定和背景附件：固定。现在，我已经修复了所有的工作，因为它应该！无论我使用top还是margin top，它都可以工作。既然我没有处理position属性，那么使用top除了保存击键之外还有什么好处吗？我感谢你的帮助！谢谢你的建议！结果我被困在一个脑屁中，混淆了位置：固定和背景连接：固定。现在我已经把它关掉了，并且执行了你的建议，一切都很好@DPROZ122我很高兴你在这里找到它！祝你好运
document.querySelector('.background__img--hero').addEventListener('animationend', posFix);

function posFix() { document.querySelector('.background__img--hero').style.position = 'fixed'; };

.background__img--hero {
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    animation: slideUp 2s 1 ease-out forwards;
}

@keyframes slideUp {
    from {
        top: 700px;
    }
    to {
        top: 0px;
    }
}