Question

使用视频替换整页图像背景的最简单方法是什么？

＆＃13;

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('#.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

＆＃13;

<video poster="#.jpg" id="bgvid" playsinline autoplay muted loop>
    <source src="#.mp4" type="video/mp4">
</video>

＆＃13;

我使用HTML5 UP的Spectral模板，但无法以最简单，最有效的方式弄清楚如何用视频替换横幅背景。（https://html5up.net/spectral）

非常感谢您提前： - ）

Answer 1

在标题中，您可以删除或替换标题背景颜色，在CSS - ＆gt;中的#header

如果这就是你的意思。

-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
//background: #2e3842; //delete or change this one
height: 3em;
left: 0;
line-height: 3em;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;

用视频替换整页图像背景（HTML5）

1 个答案: