html - 叠加层上的 CSS 文本

问题描述

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

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

当我上传它时，代码在它下面？

我使用了 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>

标签： htmlcss

我也是网络开发的新手，但是我认为如果您尝试在文本 div 周围设置边距，它可能会起作用吗？也许可以尝试： mergin-top:20px; 看看它是如何编辑文本的，如果没有，请尝试此处的步骤：https ://www.w3schools.com/howto/howto_css_image_text.asp 或者如果您讨厌像我一样阅读，请尝试此视频： https:// www.youtube.com/watch?v=edCuCED3Zmo

html - 叠加层上的 CSS 文本

问题描述

解决方案

推荐阅读