美文网首页
css3让MP4视频背景透明

css3让MP4视频背景透明

作者: 色即是猫 | 来源:发表于2021-08-09 15:14 被阅读0次

使用样式的混合   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;

}

相关文章

  • css3让MP4视频背景透明

    使用样式的混合 mix-blend-mode:screen; 详细代码: 注意:外面DIV如果有position的...

  • css3让MP4视频背景透明

    需求:入场动画有一种云雾拨开的效果,再呈现主页面 效果图 张鑫旭的博客《如何让MP4 video视频背景色变成透明...

  • css背景及其应用(二)

    背景透明(CSS3) CSS3支持背景半透明的写法语法格式是: background: rgba(0,0,0,0....

  • CSS3透明度

    css3透明度两种写法整体透明opacity: 1;背景透明,内容不透明background-color: rgb...

  • 导出透明背景视频

    先导出png帧图片,然后用pr将帧图片添加到图层上。选择格式mov带aleph,即可。

  • 使用css3背景渐变中的透明度来设置不同颜色的背景渐变

    使用css3背景渐变中的透明度来设置不同颜色的背景渐变 为了添加透明度,我们使用 rgba() 函数来定义颜色结点...

  • css3改变图片颜色

    css3改变图标颜色,用到filter(滤镜)这个属性(注意,是需要纯色的图片,白色背景或者透明背景的图片),下面...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • 透明度设置与兼容

    如何实现背景透明,文字不透明,兼容所有浏览器? 在实际中设置样式的透明度一共有3种方法 css3的opacity:...

  • 基于iOS的OpenGL ES入门

    学习动机: 问题:最近在做直播项目礼物动画,要求mp4格式文件进行播放,由于MP4视频帧只有RGB信息,没有透明度...

网友评论

      本文标题:css3让MP4视频背景透明

      本文链接:https://www.haomeiwen.com/subject/vgpzvltx.html