如何让MP4 video视频背景色变成透明?

通过CSS的mix-blend-mode属性中的screen模式,可以使MP4视频背景变为透明。将视频背景颜色设为黑色,并应用此CSS,使得黑色与其它元素混合时表现透明,从而实现视频背景透明的效果。该方法适用于不需兼容IE浏览器的项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文转自:https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/

亲测,pc端有效,但移动端微信内无效

一、视频背景透明的方法

在Web开发的时候,有些交互特效比较复杂,想要使用视频实现,但是有一个问题就是视频的背景色呀,它不能是透明的,导致设计师在制作视频的时候必须跟背景融合在一起,开发成本还是蛮高的,维护起来也比较头疼,那有没有什么好办法,可以让MP4 video视频背景色变成透明呢?

有!

我们可以借助CSS mix-blend-mode混合模式属性曲线救国。

mix-blend-mode混合模式中有一种混合模式名为滤色,单词是screen,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。

于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:

video {
    mix-blend-mode: screen;
}

例如:

下面有一张底图:

景物素材图

然后还有一个下雨的视频(不播放请点击):

此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):

景物素材图

就这么简单!

在所有不需要兼容IE浏览器的项目中都可以使用。

相信你一定学到了这个技能TIPS!

 

转载于:https://www.cnblogs.com/coderhero/p/10882003.html

微信小程序的iOS端要改变`<video>`标签的背景,实际上是指设置视频全屏播放时的封面图片或者背景色。在iOS上,由于安全限制,直接操作`<video>`元素的CSS样式可能无法达到预期效果。不过,你可以尝试通过以下几种间接的方式来实现: 1. **封面图**:在iOS下,可以先设置一个静态的`<image>`标签作为默认封面显示,当用户点击视频开始播放时,再切换到`<video>`标签。这样,在视频未播放期间,`<image>`会显示为背景。 ```html <!-- index.wxml --> <view class="cover"> <image src="{{coverImage}}" mode="widthFix" /> </view> <video src="{{videoUrl}}" bindplay="onPlay" bindpause="onPause"></video> <script> Page({ onPlay: function() { this.setData({ showVideo: true }); }, onPause: function() { this.setData({ showVideo: false }); } }) </script> ``` 在样式里控制`showVideo`状态下的隐藏显示: ```css .cover { display: none; } .showVideo .cover { display: none; /* 或者设置其他样式隐藏 */ } ``` 2. **透明背景**:对于视频内容,如果你希望它播放时不覆盖整个屏幕,可以在`<video>`上设置`background-color`属性,让其背景变为透明。 ```html <video src="{{videoUrl}}" style="position: absolute; top:0; left:0; right:0; bottom:0; background-color: transparent;"></video> ``` 请注意,这些方法可能因微信小程序平台的不同而有所限制,实际使用前最好进行充分的测试。如果需要更精确的自定义,可能需要利用一些第三方插件或者开发者的特殊处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值