为什么Chrome全屏会把背景变黑?
Why does Chrome fullscreen make the background black?
我构建了一个具有全屏功能的网页。我使用了所有正确的 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;
}
你的全屏Javascript有点不对。
body.requestFullscreen();
你在这里说的是全屏 body 元素,而不是整个页面。
改为尝试 ->
document.documentElement.requestFullscreen()