IMAGE & MEDIA
灯箱Lightbox
点击缩略图后深色幕布升起，大图居中 + 左右切换 + 底部说明。
效果预览
✕
冰岛极光 · 2026.03
‹3 / 12›
适合用在哪
画廊、商品相册、案例大图、文档配图。
容易踩的坑
- 打开灯箱后焦点仍留在背后页面，Tab 键在被遮住的链接间乱跳。
- 关闭后焦点没有回到触发的缩略图，键盘用户找不到原来的位置。
- 移动端不支持左右滑动和双指缩放，只能点小箭头切换，体验很差。
设计提示词 · Prompt
灯箱（Lightbox）：点击缩略图后全屏深色幕布（rgba(0,0,0,.88-.94) + 轻微 blur）盖住页面，大图居中（max 尺寸 90vw×85vh、object-fit:contain），底部图注 + 计数（3 / 12），左右 40px 圆形箭头按钮，右上角关闭。键盘全套：←→ 切换、Esc 关闭。切换动画：淡入 + 8px 位移，或按方向滑动。背景滚动锁定（body overflow:hidden + 滚动条宽度补偿防跳动）。点击幕布空白处关闭。图片预加载相邻两张保证切换流畅。
Lightbox: Clicking a thumbnail covers the page with a full-screen dark backdrop (rgba(0,0,0,.88-.94) + slight blur), the large image centered (max size 90vw×85vh, object-fit:contain), a caption + counter (3 / 12) at the bottom, 40px circular arrow buttons on the left and right, and a close button at the top right. Full keyboard support: ← → to switch, Esc to close. Switch animation: fade in + 8px offset, or slide by direction. Lock background scrolling (body overflow:hidden + scrollbar width compensation to prevent jumping). Clicking empty backdrop space closes it. Preload the two adjacent images for smooth switching.
常见搭配
同一页面里经常和「灯箱」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-lightstage"> <span class="d-lightstage__x">✕</span> <div class="d-lightstage__img"></div> <span class="d-lightstage__cap">冰岛极光 · 2026.03</span> <div class="d-lightstage__nav"><span>‹</span><span>3 / 12</span><span>›</span></div> </div>