TryCoding.FunTryCoding.Fun
  • 文章
  • 项目
  • 归档
  • 关于
搜索... ⌘K
Home Work Blog Projects
返回博客

使用视频作为网页背景

如何使用 CSS 和 HTML 创建以视频为背景的网页。文章包含代码示例及参考链接,讲解如何实现全屏视频背景。

全部 前端 (393) 运维 (77) 技术 (71) 后端 (25) 数据库 (10) 生活 (1)
2022年3月18日
Mt.r
|
#CSS #HTML

想做一个背景为视频的页面

下面这篇文章很好

  • https://css-tricks.com/full-page-background-video-styles/ -https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
  <source src="polina.webm" type="video/webm">
  <source src="polina.mp4" type="video/mp4">
</video>
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
上一篇
技术栈更新:Pinia、Vitest 和 Cypress
记录技术栈更新,包含状态管理库 Pinia、单元测试框架 Vitest 和端到端测试框架 Cypress 的使用。
下一篇
Vue3 路由变化监听与传参
本文介绍 Vue3 中如何监听路由变化以及如何正确地进行参数传递,包括解决 params 无效和监听不到变化等常见问题,并附带相关链接和参考文章。

分类

全部文章 577 前端 393 运维 77 技术 71 后端 25 数据库 10 生活 1

热门标签

#JavaScript #Vue #Linux #CSS #Go #CentOS #React #Nginx #Git #HTML #iOS #Mac #MySQL #Jenkins #TypeScript #Python #Docker #C #Webpack #数据库
Trycoding.fun
© 2025 版权所有 京ICP备19000129号-4
文章 项目 归档 关于 GitHub