如何修改全屏模式下摄像头区域的CSS背景色？

AI 小北

2026-7-13

修复全屏模式下前置摄像头区域的白色背景问题

针对你遇到的全屏模式下前置摄像头位置出现白色背景的问题，可以尝试以下几种解决方案：

重置根元素与body的基础样式
浏览器默认的html/body边距或背景色可能在全屏时露出，先设置基础样式消除空隙：
```
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  min-height: 100vh;
}
```

适配多浏览器的全屏伪元素样式
仅使用标准伪元素可能覆盖不全，需补充各浏览器前缀：

/* 全屏元素样式（含各浏览器前缀） */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
  background-color: #000 !important;
}

/* 全屏 backdrop 伪元素（含前缀） */
::backdrop,
::-webkit-backdrop,
::-moz-backdrop {
  background-color: #000 !important;
}

调整全屏请求的目标元素
尝试给页面最外层容器而非document.documentElement请求全屏，同时给容器设置黑色背景：
先添加容器样式：

#page-container {
  background-color: #000;
  width: 100%;
  min-height: 100vh;
}

再修改JS代码：

var goFullScreen = null;
var exitFullScreen = null;
if ('requestFullscreen' in document.documentElement) {
  goFullScreen = 'requestFullscreen';
  exitFullScreen = 'exitFullscreen';
} else if ('mozRequestFullScreen' in document.documentElement) {
  goFullScreen = 'mozRequestFullScreen';
  exitFullScreen = 'mozCancelFullScreen';
} else if ('webkitRequestFullscreen' in document.documentElement) {
  goFullScreen = 'webkitRequestFullscreen';
  exitFullScreen = 'webkitExitFullscreen';
} else if ('msRequestFullscreen') {
  goFullScreen = 'msRequestFullscreen';
  exitFullScreen = 'msExitFullscreen';
}

const container = document.getElementById('page-container');
container[goFullScreen] && container[goFullScreen]();