求助求教关于图片缩放动画与滚动时底部先消失

求教一个式样问题，主页面开始有三个图片用scale缩放并轮播，但是向下移动时是正常的顶部先消失的试样，查了下可以用background-attachment: fixed;解决，但是这个式样一遇到scale就哑火了，问了ai半天给自己差点气出个好歹来，车轱辘话来回跑[lbk]哭惹R[rbk]要怎么才能让轮播缩放与滚动时底部先消失一起生效啊……试过用js 控制宽度，但是控制宽度只能用img 标签，但是img 标签无法使用background-attachment ，用这个属性就得用background-image，用了这个属性就无法用js 来控制width缩放，
代码很简单，
html<section class=”relative h-screen overflow-hidden mt-[lbk]-65px[rbk]“>-><div class=”hero-image“style=”background-image: url(’/images/hero1.jpg‘);“></div><div class=”hero-image“style=”background-image: url(’/images/hero2.jpg‘);“></div><div class=”hero-image“style=”background-image: url(’/images/hero3.jpg‘);“></div></section>
css
.hero-image.active{opacity: 1;transform: scale(1);}.hero-image {@apply absolute w-full h-full top-0 left-0 object-cover bg-fixed bg-cover bg-center opacity-0;transform: scale(1.3);transition: opacity 1s ease-in-out, transform 8s ease-in-out;}
感觉也不难，就是被卡住动不了了
求求了，救救孩子吧