Question

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

＆＃13;

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

＆＃13;

    <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>

＆＃13;

Answer 1

您的overlay不足以显示重复背景。

尝试制作overlay整页：

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

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

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

图片无法正常重复

1 个答案: