Question

所以我有这段代码可以在我的网站上播放视频。

当我在本地运行它时，视频很好，文本在它上面

当我上传代码时，代码是否在其下方？

我使用了z-index 2？将文字放在最前面

在网站上看起来像这样 https://gyazo.com/b44cff259296ad76b3542880203bed14 在本地看起来像这样-https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc

所以我是堆栈溢出的新手，无法绕过CTRL + K 因此，这里有2个ghostbin链接。（抱歉） HTML代码-https://ghostbin.com/paste/87ctg CSS代码-https://ghostbin.com/paste/cwnsf

body {
  background-color: #000000;
  padding: 0px;
  margin: 0px;
  font-family: "Futura Hv BT";
  overflow-x: hidden;
}

.v-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: white;
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video {
  min-width: 100%;
  min-height: 100%;
}

.header-content {
  z-index: 2;

<header class="v-header container">
  <div class="fullscreen-video-wrap">
    <video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">

            </video>
  </div>

  <div class="header-content">
    <h1>gazzy</h1>
    <a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
    <a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
    <button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
  </div>


</header>

Answer 1

我也是Web开发人员的新手，但是我发现，如果您尝试在div文本周围添加边距，那可能会起作用？也许尝试： mergin-top:20px; 并查看如何编辑文本，如果不尝试的话，请按以下步骤操作：https://www.w3schools.com/howto/howto_css_image_text.asp 或者，如果您讨厌像我这样阅读，请尝试以下视频： https://www.youtube.com/watch?v=edCuCED3Zmo

叠加层上的CSS文本

1 个答案: