背景重复：不重复；不管用

Question

将 body 的高度限制为屏幕高度的 100% 您将看到 background-repeat: no-repeat;不工作。

这在代码中是如何解决的，或者将如何解决？ https://jsfiddle.net/z3gq0y5x/

为什么背景还在重复？

如何在代码中解决这个问题？

我正在使用 background-repeat: no-repeat; 但这在代码中不起作用。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bg1 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg2 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

在我提供的片段中也可以看到。

(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"
]);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bg1 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg2 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.video-wrapper {
  position: relative;
  margin: auto;
  max-width: 640px;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
}

.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;
}

<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <div class="video video-frame"></div>
      </div>
    </div>
  </div>
</div>

下面的答案给了我这个：

提供的第二个更新答案：

更新后的答案导致视频不再居中。

视频本来是在我发的问题中间居中的。

提供的答案搞砸了。

看到这里：

Answer 1

您应该将 background-repeat: no-repeat; 放到 body，而不是 body::before。同时将 min-height: 100% 添加到您的 html

html{
  min-height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body{
    height: 100%;
    background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container{
  display:flex;
  align-items:center;
  height: 100%;
}

.container 的目的是使视频垂直居中。

这里还有html代码：

<div class="container">
  <div class="outer">
    <div class="tcell">
      <div class="video-wrapper">
        <div class="ratio-keeper">
          <div class="video video-frame"></div>
        </div>
      </div>
    </div>
  </div>
</div>

背景重复：不重复；不管用

background-repeat: no-repeat; is not working

css

background

background-image