level 3
孑孓彳亍▫
楼主
求教一个式样问题,主页面开始有三个图片用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;}
感觉也不难,就是被卡住动不了了
求求了,救救孩子吧
2025年08月07日 01点08分
1
代码很简单,
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;}
感觉也不难,就是被卡住动不了了
求求了,救救孩子吧