您将如何在 html 中的全屏背景视频上添加文本？答案

【问题标题】：How would you add text over a full-screen background video in html?您将如何在 html 中的全屏背景视频上添加文本？
【发布时间】：2013-08-17 00:06:05
【问题描述】：

我在 Html 中设置了全屏图像，并希望添加叠加文本。

我的 CSS 看起来像

 .video {
position: fixed;
left: 0px;
top: 0px;
z-index: -100;
min-height: 100%;
min-width: 1040px;
width: 100%;
height: auto;
/*overflow: hidden;*/

}

.maintext {
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;

}

.rightcolumn {
    float: left;
width: 50%;

}

.leftcolumn {
float: left;
width: 40%;
margin-left: 10%;

}

我希望我的左右栏显示在后台播放的视频上。我的 html 代码中有全屏循环的视频。

总而言之，我理想情况下想要这样的东西

http://www.joe-san.com/

【问题讨论】：

标签： html video text overlay fullscreen

【解决方案1】：

z-index 需要在相对或绝对定位的元素上：

.maintext {
position: relative;
color: #CCC;
z-index: 100;
font-size: 24px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-weight: normal;
}

【讨论】：

【解决方案2】：

我认为您走在正确的道路上，您可能忘记了两列上的height。看看我的代码 -> http://jsfiddle.net/uN7Db/

诀窍是确保<html> 和<body> 元素都拉伸到100% 的高度。完成后，您可以在背景中设置视频元素的样式（就像您编写的那样），然后您可以像任何其他页面一样继续编写 html。

另外，height:auto 不需要在.video 中声明。

【讨论】：

这已解决，非常感谢。您还向我介绍了 jsfiddle，所以也感谢您