javascript - 如何实现所需的视频背景

Question

我网站的背景图片与http://upload.wikimedia.org/wikipedia/commons/1/16/La_Gran_Sabana.jpg 非常相似

我想让云彩移动，让观众看起来好像真的在山顶上凝视着山谷。需要什么样的程序或流程才能达到预期的效果？

Answer 1

您可以使用云彩移动的完整视频背景，然后将地面的 .png 图像与山丘放在一起，并将位置设置为底部。路上摆弄。

编辑:摆弄自定义视频在某种程度上是有问题的，所以我创建了一个简单的网站来展示解决方案:http://alweso.2ap.pl/sky/index.html

HTML:

<video autoplay loop id="bgvid">
<source src="sky.webm" type="video/webm">
<source src="sky.mp4" type="video/mp4">
</video>
<img id="ground" src="ground.png">

CSS:

video#bgvid { 
position: fixed; 
right: 0; 
bottom: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
z-index: -100;
background-size: cover; 
}

#ground {
position: absolute;
bottom: 0;
width: 100%;
}

图片中的天空当然应该更仔细地剪掉(我推荐 Photoshop)并且视频显然与图片的颜色不匹配，但我认为该网站显示了总体思路。