如何实现理想的视频背景

How to achieve desired video background

本文关键字：理想 的视频 背景 实现 何实现      更新时间：2023-09-26

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

我想让云移动，给人的感觉好像观众实际上是在山顶上凝视山谷。需要什么样的程序或过程才能达到预期的效果?

你可以使用云移动的完整视频背景，然后在上面放一个地面和山丘的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)，视频显然与图片的颜色不匹配，但我认为网站显示了总体思路。

相关文章：