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

最新推荐文章于 2023-12-27 16:52:21 发布
最新推荐文章于 2023-12-27 16:52:21 发布
阅读量4.9k 收藏 4
点赞数 1
分类专栏： css 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vagabond_/article/details/121676556
版权

CSS mix-blend-mode 属性

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

mix-blend-mode 使用

背景图
在这里插入图片描述

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

代码

<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
</head>
<style>
    div {
        width: 587px;
        height: 881px;
        background: url('https://img-pre.ivsky.com/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.com/12/80/35/00bOOOPIC41.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。
        </video>
    </div>


</body>

</html>

效果图
在这里插入图片描述

vagabond_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何让MP4 video视频背景色变成透明？
weixin_34392843的博客
05-17 1万+
本文转自：https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/ 亲测，pc端有效，但移动端微信内无效 一、视频背景透明的方法 在Web开发的时候，有些交互特效比较复杂，想要使用视频实现，但是有一个问题就是视频的背景色呀，它不能是透明的，导致设计师在制作视频的时候必须跟背景融合在一起，开发成...
更改videodisplay的背景颜色.
05-30
能够动态的更改flex的videodisplay的背景颜色进行切换值得学习
video全屏背景视频播放特效
07-24
video全屏背景视频播放特效是一款大气全屏的视频播放，视频为背景的文字内容布局。
html5 video 背景透明,你能将HTML5 <video>显示为全屏幕背景吗？
weixin_39743722的博客
06-23 1325
我可能有点迟，以回答这个问题，但这对于寻找答案的新人很有用。上面的答案很好，但要获得完美的视频背景，您必须检查宽高比，因为在调整屏幕大小或在不同的屏幕尺寸上使用屏幕时，视频可能会剪切或画布四周变形。我不久前进入了这个问题，我找到了使用媒体查询的解决方案。我将在这里添加代码，以及：HTML：CSS：.videoBgWrapper {position: fixed;top: 0;right: 0;bo...
mix-blend-mode, video背景色
qq_34164814的博客
05-21 813
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>菜鸟教程(runoob.com)</title> <style> .container { background-color: yellow; he.
如何去掉video 黑色的背景
最新发布
weixin_54397440的博客
12-27 902
【代码】如何去掉video 黑色的背景。
CSS设置视频背景透明
小白白的博客
04-12 1037
background: #000; mix-blend-mode: screen;
CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）
weixin_30770495的博客
06-04 295
1.hsla或rgba实现半透明边框。 rgba在rgb的基础上增加了透明通道，就不详细说了，下面重点说下hsla： 说明： HSLA(H,S,L,A) 取值： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮...
html悬浮背景透明视频教程,在html中使用背景透明的video视频
weixin_33848436的博客
06-07 3858
由于对效果的要求，需要加入透明背景的video。经过了解，现代浏览器(新版 Chrome、Firefox、Safari 等)已经全面支持 webM 格式的视频了，因此可以使用带 alpha 通道的 webM 格式视频满足要求。要得到透明 webM 格式视频，则需要来源视频已经带有透明通道。目前有几种方法：1、使用 blander 进行绿幕抠图，将 green screen 扣去，生成背景透明的 p...
html5设置视频背景颜色,HTML5设置视频背景的方法介绍
weixin_35289035的博客
06-14 1520
我们常常有着将视频作为网页背景的需要，但是在设置时也经常差强人意，今天设置了一下，可以基本达到要求了，可能有些小细节做的不是太好，希望指出来，一起进步第一步：准备工作工欲善其事必先利其器，我们首先需要准备一个视频，我准备了一个这样的视频，如图：是不是很美，当然了，，没我美哈第二步：引入视频这里我们需要用到了video/标签，然后在source里面写视频的路径，autoplay用来使其自动播放，mu...
css3教程.MP4
09-18
CSS3 是最新的 CSS 标准。 我们的 CSS3 教程向您讲解 CSS3 中的新特性。CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。 CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大
透明地播放视频
12-31
透明地播放视频
html5插入mp4视频文件
08-02
NULL 博文链接：https://alleni123.iteye.com/blog/1962371
CSS 3.0 结合video视频实现的创意开幕效果
11-20
`：应用混合模式，使视频与背景颜色相互融合。 接下来是关键的CSS部分，用于创建创意的开幕动画： 1. 选择器`h2`定义了标题的样式，包括字体、大小、颜色和对齐方式。`z-index: 1;`确保标题在视频之上但低于文本中...
Three-Transparent-Video:带有three.js和webgl的透明mp4视频
05-02
本项目“Three-Transparent-Video”专注于在3D场景中实现具有透明度的MP4视频播放。 首先，我们来深入理解Three.js。Three.js允许开发者创建复杂的3D场景，包括几何形状、光照、材质和相机等元素。它简化了WebGL ...
HTML5/ CSS简约星空动态背景
07-14
1. **背景颜色**：可以使用`background-color`属性设置星空的底色，通常选择深色如黑色或深蓝色。 2. **透明度**：通过`opacity`属性可以调整星空元素的透明度，增加深度感。 3. **定位**：使用`position`属性（如`...
CSS3 过滤器实现的背景视频颜色变换效果源码.zip
10-31
这个压缩包"CSS3 过滤器实现的背景视频颜色变换效果源码.zip"包含了利用CSS3过滤器来实现背景视频颜色变换效果的源代码。这种效果可以为网站增加动态视觉体验，吸引用户注意力，并提升整体设计的现代感。 首先，...
uniapp 修改 video 组件css样式
失忆蝴蝶
03-15 2278
uniapp video播放标签 黑色背景 重置css样式
修改video的样式
weixin_52608028的博客
02-23 460
去掉video中全屏切换的按钮 video::-webkit-media-controls-fullscreen-button{ display: none; }
css设置background背景视频发出声音
11-25
根据提供的引用内容，CSS设置background背景视频发出声音的方法如下： ```css video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -100; background-size: cover; background-position: center; background-color: #333; } video::-webkit-media-controls { display:none !important; } video::-webkit-media-controls-enclosure { display:none !important; } video::-webkit-media-controls-panel { display:none !important; } video::-webkit-media-text-track-container { display:none !important; } ``` 在上述代码中，我们使用了CSS3的video标签来设置背景视频，并通过设置z-index属性将其置于最底层。同时，我们还设置了背景颜色和背景位置等属性。为了让视频静音，我们使用了伪元素和Webkit的CSS属性来隐藏视频控件和文本轨道。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值