图像没有正确重复

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%;
}

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

查看一个工作示例 here（注意：我必须制作 .overlay position: absolute 以便覆盖覆盖页面的整个高度）