【前端】html+css把MP4视频作为背景

最新推荐文章于 2024-05-12 02:59:56 发布
最新推荐文章于 2024-05-12 02:59:56 发布
阅读量1w 收藏 39
点赞数 13
分类专栏： 大学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42295814/article/details/110874009
版权

视频编码 object-fit cover属性 视频自适应 容器调整
关键词由CSDN通过智能技术生成

代码：

<body style="height: 100%;width: 100%;position=relative">
	<video src="../../../static/video/樱花.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
</body>

最重要的一个属性object-fit：

object-fit: cover;

在这里插入图片描述

唐小尊
关注
  • 13
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
关于html用视频做背景图（o(￣ヘ￣o＃)）
qq_44210563的博客
11-19 1万+
最近看b站出了个，双生世界的游戏，额，（晃b站发现的）， 然后好奇心打开官网，背景图怎么好像视频呢？ 检查一下，还真是， 最后自己做了一个，没什么逻辑，点击查看最终效果（也就是我的demo） 于是好奇，看了一下好像蛮简单的，于是乎 ，在失败了几次，反复看b站的代码，得到了经验 （其实就是在css上加点东西，把视频放在底层） video{ height: 100%; ...
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
在本项目中，“web前端 html+css+js+jquery 网易云音乐官网模仿”是一个前端学习项目，目的是通过模仿网易云音乐的官方网站来掌握和应用HTML、CSS、JavaScript以及jQuery这四门核心技术。接下来，我们将深入探讨这些...
如何把MP4视频作为html网页的背景？
long_songs的博客
03-05 6205
大家可以先欣赏欣赏我妻红莉栖放在首页的样子： http://www.longsong.xyz/http://www.longsong.xyz/ <!doctype html> <html> <head> </head> <body style="height: 100%;width: 100%;position=relative"> <video src="http://www.longsong.online/w...
2024年Web前端最新前端vue播放m3u8、flv、mp4视频的方法_vue mp4，吊打面试官 redis
最新发布
2401_84618790的博客
05-12 889
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：notSupportedMessage: ‘此视频暂无法播放，请稍后再试’, //允许覆盖Video.js无法播放媒体源时显示的默认信息。
如何将MP4设置为网页的背景
qq_47794306的博客
08-03 1775
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .fullscreenvideo { position: absolute; top: 50%; left: 50%; min-width: 100%; .
CSS技巧系列--使用视频作为背景
程麒阁的博客
01-22 2万+
有一些官方网站为了弘扬他们的企业文化，往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上，既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受
网页设置MP4背景，解决html音乐无法自动播放
CatchLight的博客
03-25 4353
前言 之前写的大都是偏向于长篇大论的技术文章，很多人看完心中毫无波澜，甚至还觉得有点浪费时间。于是我痛定思过，决心写一些贴近生活、有意思、篇幅短的文章。 有心栽花花不开，无心栽柳柳成荫，这不，有个小姐姐问我：html用MP4做背景，为什么覆盖了html原有的元素，作为一个自诩略懂前端的我，此时却有了一个不太符合身份的想法： 此时心中不免生出一丝悔意：我什么要学后端？？但是，就算我不会，我能说不会么？ 故事是这样的 小姐姐写了一个网页，大概是这样的（我简化过的，意思到了就行） 小姐姐大都喜欢好看的事物，所
给网页添加动态视频背景 html+css
热门推荐
你好呀，很高兴你在看这里~
01-21 3万+
前言： 普通图片： 给网页添加背景图片 html+css 动态： 就是换成MP4格式作为网页背景。 实现： 定义html的video标签： <video src="xiamu.mp4" class="bjimg" autoplay loop muted></video> 在url里写入自己视频地址就好~ 添加css样式就完成了： .bjimg { position: fixed; top: 0; left: 0; wi
Python Web前端开发HTML+CSS视频教程（三）
06-13
在本课程"Python Web前端开发HTML+CSS视频教程（三）"中，主要涵盖了Web前端开发的核心技术，特别是HTML5和CSS3的应用。这是一门针对想要提升前端开发技能的学员设计的教程，旨在帮助他们从基础知识到实战案例全面...
前端登录模板html+css
12-26
在前端开发中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页界面的基础。这个“前端登录模板html+css”提供的是一套完整的登录界面设计，适用于快速构建网站或应用的登录页面。以下...
Web-前端html+css从入门到精通 152. 背景尺寸位置裁切等.zip
05-23
本课程聚焦于“Web前端html+css从入门到精通”，具体关注的是第152课的内容——背景尺寸、位置及裁切等高级技巧。这些知识点对于任何希望在前端领域深化理解的开发者来说都是至关重要的。 HTML（HyperText Markup ...
web前端(html+css+js)简单的仿原神官网静态项目
05-29
简单的前端小项目，偶然找到的大一时写的作业 使用了html+css+js 仅实现了部分功能：轮播图，播放音乐，视频，返回首页等 演示视频：https://www.bilibili.com/video/BV1C5411m7rn?spm_id_from=333.999.0.0 阅读建议...
css设置MP4背景图片
qq_39176307的博客
05-06 2155
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现代码二、效果图 前言 想设置动态背景图片，网上查了一下，想通过MP4这种方式实现一下。 一、实现代码 html代码 <video src="../assets/images/login/backgroud.mp4" class="bjimg" autoplay loop muted></video> css代码 .bjimg{ position: fixed; top: 0;.
前端使用视频作为背景图的方法
jiangjunyuan168的博客
12-08 1548
通过 video + source 引入视频，并对视频播放属性进行设置，再通过 css 使视频覆盖背景即可。
将视频设置为网页的背景
Shaw_Jie的博客
10-02 1990
将视频设置为网页的背景
css简易的进度条
qq_45723045的博客
10-22 805
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
html如何使mp4成为背景,如何让MP4 video视频背景色变成透明？
weixin_39654619的博客
06-20 3675
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8622本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、视频背景透明的方法在Web开发的时候，有些交互特效比较复杂，想要使用视频实现，但是有一个问题就是视频的背景色呀，它不能是透明的，导致设计师在制作视频的时候必须跟背...
Html添加视频文件作为背景
weixin_48456383的博客
06-21 2618
HTML5 规定了一种通过 video 元素来包含视频的标准方法。 HTML <video> 标签 | 菜鸟教程 举例
web前端：视频背景（铺满整个网页）
weixin_55439495的博客
03-10 3244
1：效果图： 其中每行相片都是来回滚动，背景为视频 2：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带背景音乐的电子相册</title> <style type="text/css"> body { width:100%; height:100%; .
html+css前端智慧校园系统网页源码
07-01
### 回答1： HTML CSS前端智慧校园系统网页源码，是指使用HTML和CSS语言编写的前端代码，用于创建一个智慧校园系统的网页。智慧校园系统是利用计算机和互联网技术，为学校提供信息化管理和服务的一种综合性平台。 网页源码主要包括HTML和CSS代码，HTML负责页面结构的搭建，CSS则负责页面样式的设计和布局。 在HTML代码中，可以使用不同的标签来创建网页的各个部分，比如头部导航栏、侧边栏、主要内容区域等。使用标签可以实现页面的划分和布局，方便用户进行浏览和操作。 而CSS样式代码则用于美化页面，通过定义不同的样式属性和值，可以设置网页中的文本字体、颜色、背景、边框等，从而使得网页具有更好的视觉效果。 在具体实现智慧校园系统网页的过程中，可以根据需求进行定制化开发，比如添加学生课程表、成绩查询、教师和学生信息管理等功能。通过将这些功能模块与HTML和CSS代码结合起来，可以实现一个全面而且美观的智慧校园系统网页。 总的来说，HTML CSS前端智慧校园系统网页源码是一个用于创建智慧校园系统网页的前端代码，通过HTML和CSS的结合，可以实现网页的布局和样式设计，为学校提供全面且美观的信息化管理和服务。 ### 回答2： HTML CSS前端智慧校园系统网页源码是用HTML和CSS编写的智慧校园系统的前端网页界面代码。该系统是基于Web的校园管理系统，在网页上实现了课程管理、学生成绩查看、作业提交、通知公告等功能。 HTML是用来定义网页结构的标记语言，它提供了丰富的元素和属性，用于构建网页的内容和布局。在智慧校园系统中，HTML被用来创建各种功能模块的网页元素，如导航栏、课程列表、成绩表等。通过使用不同的HTML元素和属性，可以实现不同功能的网页界面。 CSS是用来控制网页样式的样式表语言，它可以定义网页中元素的外观和布局。在智慧校园系统中，CSS被用来设置元素的颜色、字体、大小、边距等样式属性，以及调整元素的位置和布局。通过使用不同的CSS样式规则，可以使网页界面更加美观、易读和易用。 智慧校园系统的前端网页源码会包含HTML和CSS的代码，通过嵌套、引用和调用，将不同的功能模块组合起来，形成完整的网页界面。开发者需要根据系统需求和设计要求，编写对应的HTML和CSS代码，实现各种功能和效果。通过合理使用HTML和CSS的特性和技巧，还可以优化用户体验，提高系统的性能和响应速度。 综上所述，HTML CSS前端智慧校园系统网页源码是基于HTML和CSS的智慧校园系统的前端网页界面代码，通过编写和调整HTML和CSS代码，实现各种功能和样式效果，提供用户友好的界面和良好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值