background-repeat: no-repeat失效及修复后视频居中异常的技术咨询

我来帮你搞定这两个头疼的问题——背景重复失效和视频居中异常，咱们一步步拆解并修复：

问题根源分析 #

1. 背景重复问题：你原本把背景样式加在body上，但body设置了height: 100%，当页面内容超出视口高度时，滚动页面会露出html的默认背景（看起来像是body背景重复了）；另外，你的::before伪元素虽然做了全屏覆盖，但并没有绑定背景图，反而干扰了body背景的显示逻辑。
2. 视频居中问题：之前的修复可能破坏了table布局的居中逻辑，换成更现代的flex布局可以避免这类冲突，同时让居中实现更简洁可靠。

修复后的完整代码 #

CSS 部分 #

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; /* 避免横向滚动 */
}
/* 把背景样式绑定到全屏伪元素上 */
body::before { 
  content: ""; 
  background-repeat: no-repeat;
  background-size: cover; /* 关键：让背景覆盖整个视口 */
  position: fixed; 
  z-index: -1; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
}
/* 给伪元素设置背景图 */
body.bg1::before { background-image: linear-gradient(45deg, #102eff, #d2379b); }
body.bg2::before { background-image: linear-gradient(45deg, #102eff, #d2379b); }
body.bg3::before { background-image: linear-gradient(45deg, #102eff, #d2379b); }

/* 用flex布局实现视频居中，替代table布局 */
.outer { 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 确保容器至少占满视口高度 */
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.video-wrapper { 
  position: relative; 
  max-width: 640px;
  width: 100%;
}
.ratio-keeper { 
  position: relative; 
  height: 0; 
  padding-top: 56.25%; /* 16:9比例 */
}
.video-frame { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  animation: fade 10s ease-in 0s forwards; 
}
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
iframe { user-select: none; }
.hide { display: none; }

JavaScript 部分（无需修改，保持原样） #

(function randomBackground() {
 const classNames = [ "bg1", "bg2", "bg3" ];
 const random = Math.floor(Math.random() * classNames.length);
 document.querySelector("body").classList.add(classNames[random]);
}());
const videoPlayer = (function makeVideoPlayer() {
 const config = {};
 let player = null;
 const tag = document.createElement("script");
 tag.src = "https://www.youtube.com/iframe_api";
 const firstScriptTag = document.getElementsByTagName("script")[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 function onYouTubeIframeAPIReady() {
 const frameContainer = document.querySelector(".video");
 videoPlayer.addPlayer(frameContainer, config.playlist);
 }
 function shufflePlaylist(player) {
 player.setShuffle(true);
 player.playVideoAt(0);
 player.stopVideo();
 }
 function onPlayerReady(event) {
 player = event.target;
 player.setVolume(100); // percent
 shufflePlaylist(player);
 }
 function addPlayer(video, playlist) {
 const config = { height: 360, host: "https://www.youtube-nocookie.com", width: 640 };
 config.playerVars = { autoplay: 0, cc_load_policy: 0, controls: 1, disablekb: 1, fs: 0, iv_load_policy: 3, loop: 1, playlist, rel: 0 };
 config.events = { "onReady": onPlayerReady };
 player = new YT.Player(video, config);
 }
 function init(videos) {
 config.playlist = videos.join();
 window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
 }
 return { addPlayer, init };
}());
videoPlayer.init([ "CHahce95B1g", "CHahce95B1g", "CHahce95B1g", "CHahce95B1g" ]);

关键修复点说明 #

1. 背景修复：
   • 将背景图移到body::before伪元素上，利用position: fixed让背景始终固定在视口，不会随滚动出现重复
   • 添加background-size: cover确保背景完全覆盖视口，配合background-repeat: no-repeat彻底解决重复问题
2. 视频居中修复：
   • 用flex布局替代table布局，justify-content: center和align-items: center轻松实现垂直水平居中
   • 给.outer设置min-height: 100vh，确保即使内容较少也能占满视口高度，保持居中效果
   • 添加box-sizing: border-box避免padding导致的横向滚动

这样修改后，既能解决背景重复的问题，又能保证视频始终居中显示，布局也更稳定可靠~

内容的提问来源于stack exchange，提问作者user17631451