html - 图像没有正确重复

Question

我试图让一个小图像重复覆盖整个背景视频，但它不起作用。我明白了这一点，我已经尝试了所有我能想到的事情。有什么建议么？ 代码:

    .overlay {
	position: relative;
	z-index: 2;
	overflow: hidden;
	opacity: 0.7;
	background: #000 url(../media/overlay.png) repeat;
    }

    .content {
    position: relative;
    top: 30%;
    z-index: 3;
    margin: 0 auto;
    max-width: 720px;
    text-align: center;
    }

    .video {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
    }

    <div>
	<div class="overlay">
		<img src="/media/overlay.png" />
	</div>
	<div class="content">
		<h1 class="content__heading"><img src="/media/logo.png" /></h1>
		<p class="content__teaser"> tba. </p>
		<a href="#" class="content__cta"> tba.</a>
	</div>
	<video id="my-video" class="video" muted loop>
		<source src="media/bg.mp4" type="video/mp4">
	</video></div>

Answer 1

你的 overlay不够大，无法显示重复的背景。

尝试制作 overlay全页:

.overlay {
    width: 100%;
    height: 100%;
}

您不需要包含 <img>在 HTML 中，因为您已经使用 CSS 背景显示图像。

查看工作示例 here (注意:我必须制作 .overlay position: absolute 以便叠加层覆盖页面的整个高度)