效果:用视频做背景

版权声明:谁没个菜的时候! https://blog.csdn.net/qq_32584661/article/details/81943221
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0;}
        .main{
            border:1px solid #aaa;position: relative;overflow: hidden;
            width:100%;}
        .main:before{
            content:"";
            display: table;
        }
        .main:after{
            content:"";
            display: table;
            clear: both;
        }

        .container{width:500px;margin: 80px auto;
            background: rgba(255,255,255,0.6);
        border: 1px solid #aaa;
        border-radius:6px;}

        .bg_video{position: absolute;left:0;top:-300px;z-index:-1;}

    </style>
</head>
<body>

<h3>使用视频做背景的DIV</h3>

<div class="main">
    <div class="container">

        <h4>注册新用户</h4>
        <h4>注册新用户</h4>
        <h4>注册新用户</h4>
        <h4>注册新用户</h4>

    </div>

    <video class="bg_video" src="video.mp4" width="100%" autoplay loop muted></video>

</div>



<script>
    
</script>


</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_32584661/article/details/81943221