页面英雄图加载动效已实现，如何让其全屏响应式且保留动画？

问题出在使用background-size: cover后，背景图会根据容器尺寸自动缩放，直接修改background-position-y的动画逻辑不再适配这种缩放后的状态。我们可以通过伪元素分离背景层与容器布局的方式，既实现响应式全屏铺满，又保留加载时的向上滑动动效：

修改后的代码 #

CSS 部分 #

.page-hero {
  position: relative;
  padding-top: 214px;
  padding-bottom: 214px;
  text-align: center;
  overflow: hidden;
  z-index: 1; /* 确保内容在背景之上 */
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://via.placeholder.com/428x100);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translateY(100%); /* 初始位置让图片底部对齐容器底部 */
  animation: 2s ease-out 0s 1 animatedBanner forwards;
  z-index: -1; /* 把背景层放在内容下方 */
}

@keyframes animatedBanner {
  to {
    transform: translateY(0); /* 最终位置让图片顶部对齐容器顶部 */
  }
}

HTML 部分（无需修改） #

<div class="page-hero">
    <div class="inside-page-hero grid-container grid-parent">
        <h2>this is an image</h2>
    </div>
</div>

关键逻辑说明 #

• 用::before伪元素单独承载背景图，容器page-hero负责布局和内容层级，避免背景动画与容器布局冲突。
• background-size: cover确保背景图自适应容器宽度并铺满，同时保持图片比例。
• 动画通过transform: translateY()实现背景图从底部滑入的效果，比直接修改background-position更适配cover模式下的图片缩放状态，动画效果更稳定。
• overflow: hidden防止背景图动画过程中超出容器范围。

内容的提问来源于stack exchange，提问作者rudtek