如何制作“战争雷霆“首页背景播放视频和渐变衔接

    LogIn 3m site
                                  TUTORIALS GAME MEDIA WORKSHOP COMMUNITY ESPORT REGISTER NOW!
THUNDER
                               THUNDER
                                        REGISTERNOW！
                                        DOWNLOAD GAME
                                                                  D
                           HWindow PSTEAM

如图，如何制作像背景播放视频和下面的渐变衔接

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答


本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。


因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。

去看了war thunder的源码
1.背景播放视频直接用html的video元素插入一个视频就可以了；
2.渐变衔接是用了css的background里的linear-gradient属性，可以实现线性渐变的效果；它的做法是给div添加after伪元素，给伪元素添加这个css效果，实现从灰色变黑色；
3.另外，看源码的时候发现它还有一个小效果，感觉蛮好看的；它将一个马赛克格子图片平铺在页面上，即给页面盖上了一层灰色遮罩层的感觉， 让整个页面看上去稍微模糊朦胧了一些，很符合整体效果。