CSS mix-blend-mode 属性

mix-blend-mode 可以对图片或者视频进行混色
mix-blend-mode讲解

mix-blend-mode 使用

背景图

视频（上传不了，附上地址）
http://bpic.wotucdn/12/80/35/00bOOOPIC41.mp4

代码

<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob)</title> 
</head>
<style>
    div {
        width: 587px;
        height: 881px;
        background: url('https://img-pre.ivsky/img/tupian/pre/201906/29/shanjiao_fangwu-003.jpg') center/ 100% 100%;
    }

    video {
        mix-blend-mode: screen;
    }
</style>

<body>

    <div>
        <video width="587" height="881" controls>
            <source src="http://bpic.wotucdn/12/80/35/00bOOOPIC41.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。
        </video>
    </div>


</body>

</html>

效果图

更多推荐

css 设置MP4 video视频背景色透明