CSS视差滚动背景图无法铺满容器问题求助

当给容器添加bg-fixed（对应background-attachment: fixed）后，背景图的参考坐标系会从容器切换为整个视口，此时background-size: cover会基于视口尺寸计算缩放比例，而非容器本身的尺寸，这就导致容器内的背景图无法完全铺满。

以下是两种无需JS的纯CSS解决方案：

方案一：伪元素承载背景 #

给容器设置相对定位和溢出隐藏，用绝对定位的伪元素铺满容器，将背景属性（包括bg-fixed）应用在伪元素上。这样背景会以视口为基准固定，同时被容器裁剪，既实现视差，又保证背景铺满容器。

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>  

<div class="w-full h-80 relative overflow-hidden">
  <div class="absolute inset-0 bg-center bg-no-repeat bg-cover bg-fixed" style="background-image: url(https://img.freepik.com/premium-photo/creative-idea-with-brain-light-bulb-illustration-generative-ai_438099-13380.jpg)"></div>
</div>

方案二：CSS 3D变换实现视差 #

不依赖background-attachment: fixed，通过父元素的3D透视属性和背景元素的Z轴变换实现视差效果，此时bg-cover会基于容器尺寸正常计算，确保背景铺满。

<link href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' rel='stylesheet'/>  

<div class="w-full h-80 relative perspective-1000">
  <div class="absolute inset-0 bg-center bg-no-repeat bg-cover" style="background-image: url(https://img.freepik.com/premium-photo/creative-idea-with-brain-light-bulb-illustration-generative-ai_438099-13380.jpg); transform: translateZ(-1px) scale(2);"></div>
</div>

内容的提问来源于stack exchange，提问作者Its Md Ibrahim