>>>.视频背景透明的方法
可以使用CSS mix-blend-mode
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
混合模式中有一种混合模式名为滤色，单词是screen，有一个特性，就是黑色和其它元素进行混合的时候表现为透明。于是要实现一个视频背景色透明的效果就只要把视频背景色设置为黑色，同时设置如下CSS即可：
video {
mix-blend-mode: screen;
}
比如：
一张静态教室底图 一个背景黑色的下雨视频 代码如下
<div style="width:270px;position:relative;">
<video src="fire.mp4" width="270" autoplay="" loop="" style="position:absolute;mix-blend-mode:screen;left:0;top:0;z-index:1;"></video>
<img src="site-cut.jpg" width="270" >
</div>
把视频覆盖在素图上方 同时设置这个视频的混合模式为screen，则可以看到视频背景黑色部分变成透明了，下雨的动效就在底图上面呈现了 这里展示一张截图了 无法上传视频
>>>混合模式的特性
*任何颜色和黑色执行滤色，还是呈现原来的颜色；(黑色部分会消失看不见)
*任何颜色和白色执行滤色得到的是白色；
*任何颜色和其他颜色执行滤色模式混合后的颜色会更浅，有点类似漂白的效果
需要对一些图像素材添加一些场景特效，比如说各种天气，或者霓虹辉光效果等 可以使用。
传统做法是使用一张透明的PNG图像覆盖在上面，但是使用PNG透明前景图有下面2个缺点：
效果不自然，缺少那种跟底图完全融为一体的感觉；
图片的尺寸实在是太大了，差不多就上百K；
滤色模式模式，只要准备一张黑色底色的jpg图片就可以了，应用screen混合模式，不仅可以跟底图完全融为一体，且使用的前景图片的文件尺寸只有PNG图片的1/10。
例如有下面一张底图，森林和小鹿：
然后，有以下一些特效前景图：
分别和提供的底图进行混合 代码如下，可以看到如下图所示的实时效果： 和黑色执行滤色，自己还是呈现原来的颜色
1、
<div style="position: relative;">
<img style="position: absolute;top: 0;left: 0;z-index: 10;mix-blend-mode:screen" src="snow.jpg"/>
<img src="landscape-s.jpg" />
</div>
2、
<div style="position: relative;">
<img style="mix-blend-mode:screen;position: absolute;top: 0;left: 0;z-index: 10;" src="landscape-s.jpg" />
<img style="" src="snow.jpg"/>
</div>
(两种方式的差别只有把混合选项换了个图片的位置 都可以 )
(谁混合谁都可以得到此效果 只要有混合选项mix-blend-mode:screen; 图片黑色部分都会消失）
此处 图片中黑色部分消失看不见 图片混合模式
可以看到效果很自然。而这里使用的前景素材尺寸300*400，尺寸仅20K左右，。
还能应用于HTML video视频 就是上面提到的视频背景透明
滤色混合模式不仅可以作用于图像，还可以用于视频，同样的，只要我们把视频的底色做成黑色，就能很好得和网页背景融为一体。
例如这里有个网页截图：
然后还有两个黑色背景的视频特效素材，分别是礼花绽放和瓢泼大雨 （这里是视频截图）：
通过设置video元素混合模式为screen，可以得到下面所示的效果 视频 底图叠加之后 是会动的效果 和黑色执行滤色，还是呈现原来的颜色
1、
<div style="width:300px;background:url(site-cut.jpg);background-size:100%;">
<video width="300" autoplay="" loop="" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portraint" x5-video-player-fullscreen="true" src="fire.mp4" style="mix-blend-mode:screen;"></video>
</div>
2、
<div style="width:270px;position:relative;">
<video src="fire.mp4" width="270" autoplay="" loop="" style="position:absolute;mix-blend-mode:screen;left:0;top:0;z-index:1;"></video>
<img src="site-cut.jpg" width="270" >
</div>
(两种写法均可 和图片同理)
此处视频黑色部分消失 看不见 视频混合模式
>>>>文字与图片的叠加 文本透视效果
背景是白色的文字 使用混合模式 文字变的透明 可以透过文本看到它下面的背景图像
<div style="position: relative;width: 300px;">
<img style="width：300px" src="landscape-s.jpg"/>
<h1 style="background: white;mix-blend-mode: screen;position: absolute;top: 180px;left: 0px;font-size: 74px;font-weight: bolder;width: 100%;text-align: center;height: 100px;line-height: 100px;">SCREEN</h1>
</div>
需要设置背景颜色为白色 文字颜色不用管
还有另外一种模式 different 也可以设置文字背景可以透明看见底部图片
<div style="position: relative;width: 300px;">
<img style="width：300px" src="landscape-s.jpg"/>
<h1 style="mix-blend-mode: difference;color:wheat;position: absolute;top: 0px;left: 0px;font-size: 74px;font-weight: bolder;width: 100%;text-align: center;height: 100px;line-height: 100px;">SCREEN</h1>
</div>
需要设置文字颜色 背景颜色不用管
还有一种 overlay
<div style="position: relative;width: 300px;">
<img style="width：300px" src='landscape-s.jpg' />
<h1 style="mix-blend-mode: overlay;color:wheat;position: absolute;top: 0px;left: 0px;font-size: 74px;font-weight: bolder;width: 100%;text-align: center;height: 100px;line-height: 100px;">SCREEN</h1>
</div>
要自己找到合适的颜色 black wheat 等合适的颜色
>>>滤色混合模式的兼容性
滤色混合模式的兼容性，2014年底就开始支持，现在Edge75也是支持的，
滤色混合模式还有很多模式
在CSS3混合模式中，目前仅有16种：normal，multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity。
其中每一种混合模式都有其自的计算模式
大概分类下：
基础混合模式：normal 利用图层透明度和不透明度来控制与下面的图层混合
降暗混合模式：darken,multiply,color-burn 减色模式，滤掉图像中高亮色，从而达到图像变暗
加亮混合模式：screen,lighten,color-dodge 加色模式，滤掉图像中暗色，从而达到图像变亮
融合混合模式：overlay,soft-light,hard-light 用于不同程度的对上、下两图层的融合
变异混合模式：difference,exclusion,hard-light 用于制作各种变异的图层混合
色彩叠加混合模式：hue,saturation,color,luminosity 根据图层的色相，饱和度等基本属性，完成图层融合
除了上述场景之外，混合模式还可以运用于<canvas>元素之上。还可以配合渐变、动画、滤镜和视频等制作。嗯~~~~~
