为什么 Chrome 全屏后背景变成黑色？

Question

我构建了一个具有全屏功能的网页。我使用了所有正确的 CSS 属性来确保我的渐变背景完全覆盖屏幕，事实确实如此。但是，当我在 Chrome 中单击网站上的全屏按钮时，页面会变为全屏，但背景会变成黑色。我到处都找遍了，还是没发现什么问题。iPadOS 似乎运行良好。CSS 如下，其余代码位于我的GitHub 存储库中。

任何帮助深表感谢！

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();您在这里所说的是全屏主体元素，而不是整个页面。相反尝试->document.documentElement.requestFullscreen()