当前位置：前端开发者 > 教程 > 正文

前端开发网站页面视频当背景

2018-10-13 分类：教程阅读(886) 评论(0)

浅析web前端开发技术

web前端开发技术大纲

web前端开发技术期末填空题

html 代码

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

* {

margin: 0;

padding: 0;

}

h1 {

margin: 50px auto;

width: 300px;

}

video {

position: fixed;

z-index: -1;

object-fit: cover;

width: 100%;

height: 100%;

}

/*object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不过它是用来为 imgs、videos 和其他的媒体标签设置样式的，而不是给背景图片设置样式。*/

</style>

</head>

<body>

<video autoplay loop poster=”http://yuxiedu.org.cn/index3/ppp.png”>

<!–自动播放循环播放带有预览图–>

<source src=”http://yuxiedu.org.cn/index3/pp.mp4 ” type=”video/mp4″>

</source>

<source src=”http://yuxiedu.org.cn/index3/pp.ogg” type=”video/ogg”>

</source>

</video>

<h1>用视频当背景</h1>

</body>

</html>

web前端开发新技术

前端开发技术树

web前端开发技术答案

赞(0)

前端开发者 » 前端开发网站页面视频当背景

标签：前端开发者

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶部