极简HTML+CSS背景图滑块的属性差异与过渡效果优化咨询

核心问题：background简写导致的样式偏差原因 #

• 根本触发点是background作为CSS简写属性的全量重置规则：这个属性不是仅用来设置背景图的单属性，而是可以一次性覆盖8个背景相关子属性的综合简写，只要在元素上写了完整的background: url(...)简写，浏览器会把简写字符串里没有显式声明的子属性，全部重置为CSS初始值，完全忽略公共CSS类里提前写好的background-size、background-position等规则。
• 对应观察到的“前两张正常、后两张异常”的差异：前两张用style="background-image: url(...)"单属性写法，仅会覆盖背景图资源本身，不会触发其他背景子属性的重置，能正常继承公共类里设置的background-size: cover、background-position: center center、background-repeat: no-repeat规则；后两张用background简写后，原本生效的适配规则被全部重置回默认值——也就是背景尺寸恢复为图片原始大小、位置恢复为左上角原点、重复模式恢复为平铺，自然出现和前两张不一致的表现。
• 容易遗漏的配置：如果坚持要在内联样式里用background简写引入图片，必须把所有依赖的背景规则（尺寸、位置、重复模式）全部补进简写字符串里，比如style="background: url(...) center/cover no-repeat;"；如果想保留“把所有样式下沉到公共CSS、内联仅写图片地址”的极简开发思路，就必须放弃background简写，统一用单属性background-image写内联值，从根源上规避简写的重置副作用。

附加问题：实现滑动与缩放并行过渡的调整方案 #

• 先定位“先滑动后缩放”的根源：之前的实现把两个变换效果拆到了不同的元素层级上——水平滑动一般是加在滑块外层容器的偏移上，缩放效果是加在单个幻灯片自身的变形上，两个变换各自绑定独立的过渡规则，触发时序存在天然差，才会出现割裂的过渡感受。
• 调整方法：
  • 把滑动位移和缩放的变换逻辑合并到同一个元素的同一个transform属性上，不要把两种效果拆分到父子元素做独立变换
  • 给这个统一的变换属性配置单一的过渡规则，设置相同的时长、缓动曲线，不要给某段效果单独加延迟
  • 参考实现逻辑：将所有幻灯片的位移和缩放值统一写在激活态的transform里，比如激活态写transform: translateX(-20%) scale(1.05)，非激活态写transform: translateX(0) scale(1)，在同一个选择器上设置transition: transform 0.7s ease-out;，两个动画就会从过渡启动的第一帧完全同步并行执行，不会出现先后错位的割裂感。

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