|
|
比如这样:
- <style>
- .outerbox {position: relative;left: -302px;top:120px;width: 1200px;height: 675px;overflow: hidden;}//定义一个外框
- .shipin {position: absolute;width: 600px;height: 300px;object-fit: cover;left: 200px;top: 60px;}//定义视屏
- .tupian {position: absolute;width: 100%;height: 100%;left: 0px;top: 0px;}//定义图片
- </style>
- <div class="outerbox">
- <video class="shipin" src="视屏地址" muted="muted" autoplay="autoplay" loop="loop"></video>
- <div class="tupian"><img alt="" src="图片地址"/></div>
- <div style="position: absolute; right:156px; bottom: 85px; width:288px;">
- <img alt="" src="另外加的图片地址"/></div>
- </div><br><br><br><br><br><br>
复制代码 也可以不定义图片,直接在HTML里加另外的图片。就这么点代码就可以了,CSS里定义个外框,里面就可以随便放视屏的位置,这样方便视屏缩小或者放大,比如不想要视屏顶上的字,就可以把视频放大,然后用top:-100px;就能将视屏上面100的东西移出外框了,因为外框里有overflow: hidden;这句,移出去的东西是看不到的。
html里的顺序按视频-图片的顺序,那图片就在视频前面,反之就在视屏的后面。图片在视屏后面也挺好的,可以降低视频透明度,透过视频看到图片。
|
|