为什么Chrome全屏会把背景变黑？

Question

我构建了一个具有全屏功能的网页。我使用了所有正确的 CSS 属性来确保我的渐变背景完全覆盖屏幕，确实如此。但是，当我在 Chrome 的网站上单击全屏按钮时，页面进入全屏但 背景变为黑色 。我到处看了看，仍然找不到任何错误。 iPadOS 似乎运行良好。 CSS在下面，其余代码在我的GitHub repo。

非常感谢任何帮助！

CSS:

@import url('https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  padding-bottom: 50vh;
  background: -moz-linear-gradient(top, #19c9ff 0%, #d504f9 100%);
  background: -webkit-linear-gradient(top, #19c9ff 0%,#d504f9 100%);
  background: linear-gradient(to bottom, #19c9ff 0%,#d504f9 100%);
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  font-family: 'Sen', serif;
}

.nav {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: fixed;
  width: 100%;
}

.full {
  color: white;
  position: fixed;
  right: 20px;
  top: 12px;
  font-size: 1.34em;
}

.auto {
  color: white;
  position: fixed;
  left: 20px;
  top: 12px;
  font-size: 1.34em;
}

.logo {
  max-width: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
}

p {
  color: white;
}

#pis {
  margin-top: 33vh;
}

h1 {
  color: white;
}

.micah-box i {
  font-size: 2em !important;
  color: rgba(0, 0, 0, 0.25);
  transition: 0.3s;
}

.micah-box {
  position: fixed;
  bottom: 15px;
  left: 15px;
  transition: 0.35s;
}

.micah:hover {
  color: white;
}

.micah-box h2 {
  font-size: 0.8em;
  float: right;
  margin-left: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 9px;
  border-radius: 3px;
  color: rgba(225, 225, 225, 0.3);
  transition: 0.3s;
}

.micah-box h2:hover {
  background-color: white;
  color: black;
}

Answer 1

你的全屏Javascript有点不对。

body.requestFullscreen();

你在这里说的是全屏 body 元素，而不是整个页面。

改为尝试 ->

document.documentElement.requestFullscreen()

为什么Chrome全屏会把背景变黑？

Why does Chrome fullscreen make the background black?

javascript

html

css

google-chrome

fullscreen