图像没有正确重复

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 以便叠加层覆盖页面的整个高度）

图像没有正确重复

Image not repeating properly

html

css

background

image

repeat