烟雨草堂 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

标题: 说明 [打印本页]

作者: 东篱闲人 时间: 2022-8-28 15:17 标题: 说明

东篱闲人发表于 2022-8-27 22:30
有时间你具体说说。。。

比如这样：

<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里的顺序按视频-图片的顺序，那图片就在视频前面，反之就在视屏的后面。图片在视屏后面也挺好的，可以降低视频透明度，透过视频看到图片。

欢迎光临烟雨草堂 (http://yyct.dhlog.com/)