Chrome和Firefox中未显示背景图片

Question

Chrome或Firefox中未显示背景图片。 但是，使用其他浏览器，图像看起来也不错。

• 相对链接和硬链接
• 替换（并且使用图像文件将起作用，视频消失了）
• Adblock不相关

Apache共享服务器/共享托管环境。

预期结果：背景视频在页面顶部播放。 后台视频在主目标页面上工作，但不在分区页面上工作……目前已在.css中设置（类似于全屏视频背景CSS方法）。

 <header id="header">
  <div class="intro">
    <div class="container">
      <div class="row">
        <div class="intro-text">
            <h1><span class="name">TEXT</span></h1>
            <h2><span class="someClass"><span>Design &#38; TEXT</span></h2>
            <p><a title="TEXT" href="TEXT" class="btn btn-default btn-lg page-scroll" class="class2"><i class="fa fa-level-down" aria-hidden="true"></i></a>
            <a title="TEXT" href="TEXT" class="btn btn-default btn-lg page-scroll" class="class22"> <i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
            <a title="Send email" href="mailto:TEXT?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'NOTSPAM' from the address before sending your email." class="btn btn-default btn-lg page-scroll" class="class22"> <i class="fa fa-envelope" aria-hidden="true"></i></a></p>
          </div>
      </div>
    </div>
  </div>
</header>

Answer 1

您说背景图片没有显示，但是您说背景视频没有播放。 看来您正在尝试在CSS背景属性中使用mp4-这将无法正常工作， background属性（或更确切地说，是background-image image-您使用的是简写形式）不支持视频。

Answer 2

如果要将视频添加为背景，则需要考虑使用索引，位置和不透明度将两个元素分层。 第一个元素将是“视频”，另一个元素是“不透明度”。 以W3schools的以下链接为解决方案的灵感： https ://www.w3schools.com/howto/howto_css_fullscreen_video.asp