0

我在 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/

4

2 回答 2

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;
}
于 2013-08-14T21:16:28.210 回答
0

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

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

此外，无需在 中height:auto声明.video。

于 2013-08-14T21:01:03.247 回答