防止梯度重复，如果这就是它在这里所做的

Question

究竟怎样才能解决这个问题？

我尝试添加：

background-repeat: no-repeat;

那什么也没做。

在我提供的图像中，您可以看到渐变重复出现。

如何防止这种情况发生？

也出现在可重现的代码示例中。

https://jsfiddle.net/zndyt9cm/

我什至尝试这样做。

.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7,
.bg8,
.bg9 {
    background-repeat: no-repeat;
}

代码：

function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3",
    "bg4",
    "bg5",
    "bg6",
    "bg7",
    "bg8",
    "bg9"
  ];

  const randomIndex = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[randomIndex]);
}

randomBackground();

const videoPlayer = (function makeVideoPlayer() {
  let player;

  function loadIframeScript() {
    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");
    addPlayer(frameContainer);
  }


  function createResetHandler(player) {
    const resetVideo = document.querySelectorAll(".exit");
    document.addEventListener("click", function resetVideoHandler() {
      player.destroy();
      console.log("removePlayer");
    });

  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    /*createResetHandler(player);*/
  }

  function addPlayer(video) {
    const options = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      /*videoId: video.dataset.id,*/
      width: 640
    };
    options.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      //loop:1,
      //playlist:0,
      listType: 'playlist',
      list: ''
    };
    options.events = {
      "onReady": onPlayerReady
    };

    /*options.playerVars.loop = 1;
    options.playerVars.playlist = video.dataset.id;*/
    player = new YT.Player(video, options);
  }

  function init() {
    player = null;
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    init
  };
}());
videoPlayer.init();

.bg1 {
  background-image: linear-gradient(to bottom right, #180cac, #d054e4);
}

.bg2 {
  background-image: linear-gradient(-225deg, rgb(117, 93, 213) 35%, rgb(55, 136, 209) 100%);
}

.bg3 {
  background-image: linear-gradient(135deg, rgb(44, 209, 255) 0%, rgb(250, 139, 255) 100%);
}

.bg4 {
  background-image: linear-gradient(155deg, #0190df, #9300e4);
}

.bg5 {
  background-image: linear-gradient(143deg, #504099 0%, #32C39F 100%);
}

.bg6 {
  background-image: linear-gradient(167deg, #238af8 0%, #27e0c0 100%);
}

.bg7 {
  background-image: linear-gradient(110deg, #1e089b, #4702a0);
}

.bg8 {
  background: linear-gradient(45deg, rgb(200, 25, 210), rgb(20, 55, 110));
}

.bg9 {
  background: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);
}

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

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  margin: 0 8px;
}

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  padding: 1px;
  background: blue;
}

.video-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid purple;
  pointer-events: none;
}

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

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="video-wrapper">
    <div class="ratio-keeper">
        <div class="video video-frame" ></div>
    </div>
    <div class="fadeBackground"></div>
      <a href="" class="exit" title="Exit" aria-label="Close"></a>
  
  </div>
   
</div>

Answer 1

https://jsfiddle.net/5g8mpc9n/

   body {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }