使用样式的混合 mix-blend-mode: screen;
详细代码:
<video width="998" height="505" autoplay="autoplay" controls loop="loop" style="mix-blend-mode: screen;">
<source src="../img/login/camera.mp4" type="video/mp4" >
</video>
注意:外面DIV如果有position的话背景无法透明,还有就是IE不支持这个样式。
一些光效的话,可以在原图上 lighten效果会更好一些。
mix-blend-mode其它混合模式
{
mix-blend-mode: normal; // 正常
mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色
mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗
mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡
mix-blend-mode: color-burn; // 颜色加深
mix-blend-mode: hard-light; // 强光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
}
网友评论