图像不能正确重复

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

.overlay { 
 
\t position: relative; 
 
\t z-index: 2; 
 
\t overflow: hidden; 
 
\t opacity: 0.7; 
 
\t 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> 
 
\t <div class="overlay"> 
 
\t \t <img src="/media/overlay.png" /> 
 
\t </div> 
 
\t <div class="content"> 
 
\t \t <h1 class="content__heading"><img src="/media/logo.png" /></h1> 
 
\t \t <p class="content__teaser"> tba. </p> 
 
\t \t <a href="#" class="content__cta"> tba.</a> 
 
\t </div> 
 
\t <video id="my-video" class="video" muted loop> 
 
\t \t <source src="media/bg.mp4" type="video/mp4"> 
 
\t </video></div>

来源

2017-05-07 Disloyal g

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

尝试使overlay整版：

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

你并不需要包括在HTML中<img>，既然你已经使用CSS背景显示图像。

看到一个工作示例here（注：我不得不做出.overlayposition: absolute使得覆盖覆盖页面的整个高度）

来源

2017-05-07 01:19:21

没关系，只是做了它。它不会改变任何东西。 –

虽然我摆脱了图像标签，但图像消失了。 –

@Disloyalg CSS文件中的路径“../ media/overlay.png”是否正确（您可以在检查员中检查）？另外，你可能会考虑制作'.overlay'' position：绝对' –

图像不能正确重复

回答

相关问题