怎么将video挤出去的两个lv2和lv3（两个div内的图片与文字）显示在视频上方

问题描述：

这个是外联的

@charset "UTF-8";

*{padding: 0;

margin: 0;}

@font-face{

font-family:书体 ;

src: url(书体方米字体.ttf);

}

.lv1{height: 600px;

width: 1300px;

border: solid red;

}

.lv2{width: 450px;

height: 450px;

border-radius: 50% 50%;

border: 10px solid white;

box-shadow: 5px 5px 15px #000;

background: url("cd_img.jpg");

float: left;

margin-top: 60px;

margin-left: 130px;

position: relative;

}

.lv3{width:500px;

height: 450px;

float: left;

margin-top: 130px;

margin-left: 125px;

}

.lv4{width: 95px;

height: 95px;

background: url("yinfu.gif") no-repeat;

background-size: cover;

border-radius: 50% 50%;

border: 5px solid white;

margin: 175px auto;

box-shadow: 5px 5px 15px #000;

}

.lv1 .lv3 h1 {

font-family: 书体;

font-size: 100px;

}

.lv1 .lv3 p{line-height: 200%;

margin-left: 20px;

}

这是格式<div class="lv1">
<video src="麦浪.mp4" autoplay="autoplay" width="1300" height="600" controls loop></video>
<div class="lv2">
<div class="lv4"></div>
</div>
<div class="lv3">
<h1>风中的麦浪</h1>
<p>爱过的地方 <br/>
当微风带着收获的味道<br/>
吹向我脸庞<br/>
想起你轻柔的话语<br/>
曾打湿我的眼眶<br/>
嗯...啦...嗯...啦...<br/>
我们曾在田野里歌唱 <br/>
在冬季盼望<br/> 却没能等到阳光下</p >
</div>
</div>

答

<html>
<head>
    <style>
        *{padding: 0;

margin: 0;}

@font-face{
         font-family:书体 ;

         src: url(书体方米字体.ttf);

         }

.lv1{height: 600px;

   width: 1300px;

   border: solid red;
  position:relative;
   }

.lv2{width: 450px;

   height: 450px;

   border-radius: 50% 50%;

   border: 10px solid white;

   box-shadow: 5px 5px 15px #000;

   background: url("cd_img.jpg");


  position: absolute;
  top:60px;
  left:130px;

}

.lv3{width:500px;

   height: 450px;

   position: absolute;
  top:130px;
  left:400px;
}

.lv4{width: 95px;

   height: 95px;

   background: url("yinfu.gif") no-repeat;

   background-size: cover;

   border-radius: 50% 50%;

   border: 5px solid white;

   margin: 175px auto;

   box-shadow: 5px 5px 15px #000;

}

.lv1 .lv3 h1 {
  font-family: 书体;

  font-size: 100px;

}

.lv1 .lv3 p{line-height: 200%;

           margin-left: 20px;

}
    </style>
</head>
<body>
    <div class="lv1">
        <video src="麦浪.mp4"  autoplay="autoplay" width="1300" height="600" controls loop></video>
        <div class="lv2">
            <div class="lv4"></div>
        </div>
        <div class="lv3">
            <h1>风中的麦浪</h1>
            <p>爱过的地方 <br/>
            当微风带着收获的味道<br/>
            吹向我脸庞<br/>
            想起你轻柔的话语<br/>
            曾打湿我的眼眶<br/>
            嗯...啦...嗯...啦...<br/>
            我们曾在田野里歌唱 <br/>
            在冬季盼望<br/> 却没能等到阳光下</p >
        </div>
    </div>
    
    
</body>
<script>
  
</script>
</html>

怎么将video挤出去的两个lv2和lv3（两个div内的图片与文字）显示在视频上方

相关推荐