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

浅析web前端开发技术
web前端开发技术 大纲
web前端开发技术期末填空题

html 代码

<!DOCTYPE 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前端开发技术 答案
» 本文来自:前端开发者 » 《前端开发网站页面 视频当背景》
» 本文链接地址:https://www.rokub.com/6132.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!