loness

HTML视频背景
<!DOCTYPE html> <html> <head> <meta ...
扫描右侧二维码阅读全文
14
2019/04

HTML视频背景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="视频背景"/>
<title>视频背景</title>
  <style>
    html{height:100%;}
body{height:100%;margin:0;}
video{width:100%;height:100%;object-fit:cover;vertical-align:bottom}
#main{position:absolute;top:0;width:100%;height:100%;}
    </style>
</head>
<body>
<video src="video/bg.mp4" autoplay muted loop></video>
<div id="main">
<h1>背景视频</h1>
  <p>类似于抖音官网……在看直播时学到的,记了下来,当然这只是的基本结构...但是没有足够的时间去看完,所以...</p>
  </div>
  </body>
</html>

效果图
视频背景
预览地址:http://blog.loness.cn/html/video

最后修改:2019 年 04 月 18 日 03 : 31 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

3 条评论

  1. 猫客工作室

    一口气阅读了好几篇,这篇写得最好!
    ———— 剑眉大侠博客(专门写引流文章的)

  2. 猫客工作室

    一口气阅读了好几篇,这篇写得最好!
    ———— 剑眉大侠博客(专门写引流文章的)

  3. 今日新闻

    文章不错支持一下吧