如何让HTML中的图片固定不随滚动移动并铺满全屏？

你之前的操作无效的核心原因是：<a-assets> 中的 <img> 仅作为资源预加载容器，不会直接渲染到3D场景中，因此给它添加普通CSS样式对场景显示没有作用。以下针对A-Frame场景和普通HTML场景分别提供可行方案：

针对A-Frame 3D场景 #

方案1：用<a-sky>实现全景固定背景 #

<a-sky>是A-Frame内置的全景背景元素，默认包裹整个场景，自动铺满屏幕且始终跟随相机视角，不会出现滚动偏移：

<a-scene>
  <a-assets>
    <img id="mainpage" src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg">
  </a-assets>
  <!-- rotation属性调整图片朝向，确保正面对准相机 -->
  <a-sky src="#mainpage" rotation="0 180 0"></a-sky>
</a-scene>

方案2：用<a-plane>实现平面固定背景 #

若需要平面背景而非全景效果，可将平面绑定为相机的子元素，让它始终跟随相机位置，保持在屏幕视野内：

<a-scene>
  <a-assets>
    <img id="mainpage" src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg">
  </a-assets>
  <!-- 将平面作为相机子元素，自动跟随相机移动 -->
  <a-camera>
    <a-plane 
      src="#mainpage" 
      position="0 0 -5" 
      width="16" 
      height="9" 
      material="shader: flat; depthTest: false"
    ></a-plane>
  </a-camera>
</a-scene>

• position="0 0 -5"：将平面放置在相机前方5个单位的位置
• width="16" height="9"：匹配图片宽高比，避免拉伸变形
• depthTest: false：确保平面始终显示在最上层，不会被其他场景元素遮挡

针对普通HTML场景（非A-Frame） #

如果需求是在普通网页中实现固定背景，可使用以下CSS方案：

<div class="fixed-bg">
  <img src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg" alt="">
</div>

.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1; /* 让背景处于内容下方 */
}
.fixed-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满容器，保持图片比例，裁剪多余部分 */
}

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