如何让移动端与桌面端背景色保持一致？

兄弟，太懂这种移动端专属小bug的烦人程度了！你给儿子做的闪卡应用在桌面端正常，一到手机上滚动就从黑变白，大概率是这两个原因导致的，咱们一步步搞定：

1. 先把全局背景色锁死 #

你现在只给.thumbnail设置了半透明黑色，但body、html这些全局容器可能没固定黑色背景。移动端滚动到页面边缘时，浏览器会露出默认的白色底色，所以先把全局层的背景焊死：

html, body {
  background-color: #000;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保占满整个视口高度 */
  overflow-x: hidden; /* 避免横向滚动出现空白 */
}

另外别忘了给你的React根容器也加上背景，防止组件层级透出问题：

#root {
  min-height: 100vh;
  background-color: #000;
}

2. 禁用移动端滚动回弹的默认行为 #

很多移动端浏览器在滚动到页面顶部/底部时，会有回弹（overscroll）效果，这时会显示浏览器自带的白色背景。咱们用CSS把这个效果关掉：

html {
  overscroll-behavior: none; /* 禁用全局滚动回弹 */
}

3. 检查组件背景的透明白色问题 #

你给.thumbnail用的是rgba(0, 0, 0, 0.2)半透明黑色，这个是基于父容器背景显示的。如果父容器没设置黑色，就会透出下面的白色。现在全局背景已经是黑色了，这个半透明效果就能正常显示，不会再出现滚动时变白的情况啦。

按照这几步调整后，再用手机测试下滚动，应该就能和桌面端保持一致的黑色背景了！

备注：内容来源于stack exchange，提问作者code-8