本文详解如何将多张图片限制在预设装饰性画框（frame）内，构建一个仅在画框区域内切换图片的纯css轮播组件，避免背景随幻灯片移动，并保留左右箭头导航与自动循环能力。

本文详解如何将多张图片限制在预设装饰性画框（frame）内，构建一个仅在画框区域内切换图片的纯css轮播组件，避免背景随幻灯片移动，并保留左右箭头导航与自动循环能力。

在构建网页轮播图（carousel）时，一个常见但易被忽视的关键需求是：视觉框架（frame）需保持静止，仅内部图片内容动态切换。你提供的示例中，label 元素各自设置了 background-image: url("banner2.png")，导致每次切换幻灯片时，整个带背景的 label 都在平移——结果就是“画框”本身也在滑动，违背了设计初衷。

✅ 正确做法是：将画框（frame）作为容器背景，固定于外层容器（如 <form></form>）上；而每张轮播图仅作为内容层，通过 transform 平移其自身（不含背景），从而实现「画框不动、图片流动」的效果。

✅ 核心修改要点

1. 移除所有 label 的背景图
   删除 label { background-image: ... }，避免每个标签携带独立背景并随位移滚动。

2. 为 <form></form> 设置固定画框背景
   将你的 frame 图片（如 banner2.png）设为 form 的 background，并确保：

   form {
     background-image: url("banner2.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     position: relative; /* 保证子元素定位上下文正确 */
     width: 100vw;
     height: 100vh;
     overflow: hidden; /* 关键：裁剪超出画框的内容 */
   }

3. 确保 label 仅承载内容，不干扰画框
   label 应仅作为内容占位符，其 z-index 和 transform 仅控制图片切换逻辑，不再携带视觉边框：

   label {
     /* 移除 background-image！ */
     background-color: transparent; /* 显式声明，避免继承干扰 */
     color: white;
     font-size: 3rem;
     display: inline-block;
     width: 100vw;
     height: 100vh;
     position: absolute; /* 改为 absolute，脱离文档流，便于 transform 定位 */
     top: 0;
     left: 0;
     text-align: center;
     line-height: 100vh;
     z-index: 1;
   }

4. 修正导航箭头定位（:before/:after）
   原代码中箭头伪元素依赖 label 的 position: relative，现因 label 改为 absolute，应将箭头提升至 form 层级或使用更健壮的定位方式。推荐方案：

   • 为 form 添加 position: relative；
   • 将箭头伪元素挂载到 form:before/form:after，或用独立 <button></button> 替代（语义更佳、可访问性更好）。

✅ 完整精简示例（HTML + CSS）

<!DOCTYPE html>
<html>
<head>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: sans-serif; overflow: hidden; }

    form {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: url("https://i.postimg.cc/bJHwdPBH/banner2.png") center/cover no-repeat;
      overflow: hidden;
    }

    input { position: absolute; opacity: 0; }

    label {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      z-index: 1;
      transition: transform 400ms ease-out;
    }

    /* 轮播逻辑：水平位移 */
    input:nth-of-type(1):checked ~ label:nth-of-type(1) { transform: translateX(0); }
    input:nth-of-type(2):checked ~ label:nth-of-type(2) { transform: translateX(-100%); }
    input:nth-of-type(3):checked ~ label:nth-of-type(3) { transform: translateX(-200%); }
    input:nth-of-type(4):checked ~ label:nth-of-type(4) { transform: translateX(-300%); }

    /* 左右箭头（挂载在 form 上）*/
    form:before, form:after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 5rem; height: 10rem;
      background: rgba(255, 72, 0, 0.25);
      border-radius: 50%;
      cursor: pointer;
      z-index: 10;
      font-size: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      user-select: none;
    }
    form:before {
      left: 1rem;
      content: "‹";
    }
    form:after {
      right: 1rem;
      content: "›";
    }
  </style>
</head>
<body>
  <form>
    <input type="radio" name="fancy" id="pools" checked />
    <input type="radio" name="fancy" id="trisky" />
    <input type="radio" name="fancy" id="filler" />
    <input type="radio" name="fancy" id="lorem" />

    <label for="pools">? Pools</label>
    <label for="trisky">♨️ trisky</label>
    <label for="filler">filler</label>
    <label for="lorem">Lorem ipsum</label>
  </form>
</body>
</html>

⚠️ 注意事项

• 图片资源路径：确保 banner2.png 路径正确（建议使用绝对路径或 Webpack/Vite 等构建工具处理）；
• 响应式适配：当前为 100vh/vw，若需适配移动端，请添加 @media 查询调整尺寸与字体；
• 可访问性增强：生产环境建议用 <button type="button"></button> 替代伪元素箭头，并添加 aria-label 和键盘支持（Tab 切换 + Enter 触发）；
• 自动轮播扩展：可通过 :checked 配合 @keyframes 或 JS setInterval() 实现自动播放，但纯 CSS 方案需借助 animation-delay 链式触发（较复杂，推荐 JS 控制）。

通过以上结构分离（frame = 容器背景，slides = 可动内容），你即可精准实现「画框恒定、图片流转」的专业轮播效果，既满足视觉设计约束，又保持代码清晰可控。