时间戳

首页 > 解决方案 > 将段落文本放置在视频背景上的 h1 下方

html - 将段落文本放置在视频背景上的 h1 下方

问题描述

我无法将段落文本像 H1 一样居中放置在视频背景上。我不确定我应该使用什么。我尝试margin并padding进行了调整，但它们使视频尺寸变大，这不是我想要的。

/* Background Video */

#background-video>video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#home {
  position: relative;
}


/* Overlay the Video for Text */

#overlay {
  position: relative;
  z-index: 2;
}


/* Video Text */

h1 {
  color: hsl(0, 0%, 100%);
  height: 40vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
<main>
  <section id='home'>
    <div id='overlay'>
      <h1>My Name</h1>
      <p id="Info">Web Developer</p>
    </div>
    <section id='background-video'>
      <video autoplay loop muted>
                    <source src="Video 3.mp4">
                </video>
    </section>
  </section>
</main>

标签： htmlcss

解决方案

这是你可以尝试的：）

使用position:absolute和transform:translate();属性。100vh并设置section元素的高度id="home"

CODEPEN 链接： https ://codepen.io/emmeiWhite/pen/JjNVZWe

*{
 margin:0;
  padding:0;
  box-sizing:border-box;
}
#home{
  height:100vh;
  width:100vw;
  position:relative;
}
#background-video > video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  background:blue;
}

/* Overlay the Video for Text */
#overlay
{
    position: absolute;
    z-index: 2;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/* Video Text */
<html>
<body>
    <main>
        <section id='home'>
            <div id='overlay'>
                <h1>My Name</h1>
                <p id="Info">Web Developer</p>
            </div>
        
            <section id='background-video'>
                <video autoplay loop muted>
                    <source src="Video 3.mp4">
                </video>
            </section>
        </section>
        </main>
    </body>
    </html>

推荐阅读