效果：用视频做背景

最新推荐文章于 2024-07-24 10:36:24 发布
最新推荐文章于 2024-07-24 10:36:24 发布
阅读量3k 收藏 5
点赞数 3
分类专栏： 前端笔记 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32584661/article/details/81943221
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0;}
        .main{
            border:1px solid #aaa;position: relative;overflow: hidden;
            width:100%;}
        .main:before{
            content:"";
            display: table;
        }
        .main:after{
            content:"";
            display: table;
            clear: both;
        }

        .container{width:500px;margin: 80px auto;
            background: rgba(255,255,255,0.6);
        border: 1px solid #aaa;
        border-radius:6px;}

        .bg_video{position: absolute;left:0;top:-300px;z-index:-1;}

    </style>
</head>
<body>

<h3>使用视频做背景的DIV</h3>

<div class="main">
    <div class="container">

        <h4>注册新用户</h4>
        <h4>注册新用户</h4>
        <h4>注册新用户</h4>
        <h4>注册新用户</h4>

    </div>

    <video class="bg_video" src="video.mp4" width="100%" autoplay loop muted></video>

</div>



<script>
    
</script>


</body>
</html>

酷jjs
关注
专栏目录
FFmpeg进阶: 给视频添加背景音乐
yang1fei2的博客
12-04 2641
在抖音、快手一类的短视频软件中，为了提升视频的效果，我们通常会给视频添加有趣的背景音乐。通过FFmpeg库我们也可以给视频添加背景音乐，这里就介绍一下如何通过FFmpeg库给视频添加背景音乐。添加背景音乐的原理图如下图所示
html怎么用视频做网页背景图片,使用视频作为网页背景的技术探讨
weixin_39779975的博客
06-08 2005
使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。观看演示1视频作为网页背景的限制因素在动手编码实现前，视频作为网页背景的有些问题我们要先考虑清楚：并不是因...
vue视频背景登录界面.rar
03-25
使用vue框架和h5制作的登录界面，背景为动态视频，内涵源码和一个视频素材，素材地址：http://www.coverr.co/
html视频标签的使用＜video＞＜/video＞
weixin_47084532的博客
04-12 2074
html <video class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="" width="100%"> <source src="../assets/images/bj.mp4" type="video/mp4"> </video> css .videoContainer{ background-color: aqua;
使用视频作为背景
最新发布
SiYuHuang_SCDN的博客
07-24 161
【代码】使用视频作为背景。
网站背景播放视频的主页
12-07
网站背景播放视频的主页，主要用于宣传性的网站，
视频背景的制作
qq_44211323的博客
02-27 1280
（作者：郭鑫 撰写时间：2019年1月31号） 为了让页面更完美，更引人注目。在设计是往往为页面添加背景，例如一些图片啊，还可以用视频作为背景。 用一个div包裹住video标签，在video标签放视频，然后再把video标签宽高适应屏幕。接下来用一个div放内容，使用绝对定位将其定位在放视频的div上面，然后就可以在放内容的div里编写自己的内容了（放视频的div和放内容的div为同级关系）...
如何将MP4设置为网页的背景
qq_47794306的博客
08-03 1838
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .fullscreenvideo { position: absolute; top: 50%; left: 50%; min-width: 100%; .
moviepy音视频剪辑：使用mask遮罩实现视频叠加透明效果.rar
09-16
以上就是使用moviepy实现视频叠加透明效果的基本流程。实际上，moviepy还提供了许多高级特性，比如时间线编辑、颜色调整、速度控制等，可以让开发者创作出各种复杂和创意的视频作品。通过熟练掌握moviepy库，你可以...
bg-blur:使用CSS仅模糊背景视频
03-06
在本文中，我们将深入探讨如何使用CSS来实现背景视频的模糊效果，这通常被称为"bg-blur"技术。这个效果可以提升网站的视觉吸引力，同时保持页面内容清晰易读。让我们一起看看如何实现这一功能。 首先，我们需要一个...
react-video-compositor:具有虚拟背景，前景效果和bokeh背景模糊的React视频组件
04-18
灵活的React视频组件，用于虚拟背景，前景效果和bokeh背景虚化。 资源 仓库： : 文档： : 套件： ： 入门 安装 npm i react-video-compositor 进口 import { VideoCompositor } from "react-video-compositor" ...
如何在C#中播放AVI短片并使背景透明源代码
10-28
如何在C#中播放AVI短片并使背景透明源代码 资源很棒的哦 大家快来下吧 属于个人珍藏的哦 谢谢大家了
vue-videobg:Vue.js的视频背景组件
05-03
影片背景 通过NPM安装 通过npm作为vue-videobg 。 npm install --save vue-videobg 用法 import VideoBg from 'vue-videobg' Vue . component ( 'video-bg' , VideoBg ) // or new Vue ( { el : 'body' , components : { VideoBg } } ) < video-bg :sources =" ['demo/assets/video.mp4'] " img =" demo/assets/bg.jpg " > <!-- If you want to add content here, a slot is waiting! --> </ video-bg > 执照 VideoBackground是根据MIT许可发布的。 有
小程序中视频作为页面背景
@LiuStrong
12-30 5252
业务背景：实现在小程序原生页面中以视频作为页面背景效果 wxml: <video id="myVideo" src="https://download.mia.com/newpc/home.mp4" loop muted controls="{{false}}" show-play-btn="{{false}}" show-center-play-btn="{{false}}" enable-progress-gesture="{{false}}" object-fit="co...
微信小程序视频视频背景与控制处理（笔记）
08-23 7572
想用一个全屏的视频当做小程序背景，然后呢，更坑爹啊，上传单个素材2M限制。 注意： 1：用video组件时候，原生组件z-index无论如何都不会比他更高的，要用新的cover-view 2：视频格式MP4支持AVC（H264）把你的视频拖到chrome试试，就知道了。 不然你会看到： The element has no supported sources. 3：视频控制，实现全屏，用...
css简易的进度条
qq_45723045的博客
10-22 845
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
Vue.js的视频背景组件
cuk5239的博客
07-20 2974
影片背景 (Video Background) Install via NPM 通过NPM安装 Available through npm as vue-videobg. 通过npm作为vue-videobg提供。 npm install --save vue-videobg npm install-保存vue-videobg 现场演示 (live demo) http://pespa...
vue 背景图 自适应_Vue的自适应视频背景播放器
cuk5340的博客
07-30 4300
vue 背景图 自适应 Vue响应视频背景播放器 (vue-responsive-video-background-player) Play your own videos in background responsively in different resolutions. 以不同的分辨率在后台播放自己的视频。 View Demo 查看演示 Download Source下载源 分两步安...
Vue----登录主页动态背景短视频制作
标题有点难
09-18 6501
一、HTML代码 <source src="../assets/video/G1s.mp4" type="video/mp4"/> 注：src的路径根据自己的需要改变； video标签无法自动播放 刷新后无法自动播放； 解决方法：给video标签添加muted属性，可写为muted或完整写法：muted=“muted” <template> <di...
Vibe算法：视频序列的通用背景分割
这种传播机制有助于保持整体背景模型的连续性和一致性，提高了整个视频序列的分割效果。相比于静态或规则更新策略，Vibe算法能更好地处理动态背景和快速运动物体，减少了误报和漏报的可能性。 然而，值得注意的是，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值