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

Question

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

\n\n

任何帮助深表感谢！

\n\n

CSS：

\n\n

@import url(\'https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap\');\n\n* {\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  padding-bottom: 50vh;\n  background: -moz-linear-gradient(top, #19c9ff 0%, #d504f9 100%);\n  background: -webkit-linear-gradient(top, #19c9ff 0%,#d504f9 100%);\n  background: linear-gradient(to bottom, #19c9ff 0%,#d504f9 100%);\n  background-repeat: no-repeat;\n  background-size: contain;\n  text-align: center;\n  font-family: \'Sen\', serif;\n}\n\n.nav {\n  background-color: rgba(0, 0, 0, 0.5);\n  padding: 10px;\n  position: fixed;\n  width: 100%;\n}\n\n.full {\n  color: white;\n  position: fixed;\n  right: 20px;\n  top: 12px;\n  font-size: 1.34em;\n}\n\n.auto {\n  color: white;\n  position: fixed;\n  left: 20px;\n  top: 12px;\n  font-size: 1.34em;\n}\n\n.logo {\n  max-width: 200px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50vw;\n}\n\np {\n  color: white;\n}\n\n#pis {\n  margin-top: 33vh;\n}\n\nh1 {\n  color: white;\n}\n\n.micah-box i {\n  font-size: 2em !important;\n  color: rgba(0, 0, 0, 0.25);\n  transition: 0.3s;\n}\n\n.micah-box {\n  position: fixed;\n  bottom: 15px;\n  left: 15px;\n  transition: 0.35s;\n}\n\n.micah:hover {\n  color: white;\n}\n\n.micah-box h2 {\n  font-size: 0.8em;\n  float: right;\n  margin-left: 10px;\n  background-color: rgba(0, 0, 0, 0.25);\n  padding: 9px;\n  border-radius: 3px;\n  color: rgba(225, 225, 225, 0.3);\n  transition: 0.3s;\n}\n\n.micah-box h2:hover {\n  background-color: white;\n  color: black;\n}\n\n

\n

Answer 1

你的全屏 Javascript 有点错误。

body.requestFullscreen();

您在这里所说的是全屏主体元素，而不是整个页面。

相反尝试->

document.documentElement.requestFullscreen()