我想用一些文字覆盖视频。html / css在Safari和Firefox中可以正常工作-但在Chrome中,滚动时文本消失。这是显示问题的快速视频:https : //imgur.com/2iShiaL
HTML / CSS非常简单:
<figure>
<video preload autoplay loop muted playsinline src="https://zachholman.com/video/utc-one.mp4" poster="https://zachholman.com/images/talks/utc/poster-one.jpg">Your browser does not support the video tag.</video>
<h1 style="left:8vw; top:6vw; font-size: 5vw; color:blue;">
<div>What is</div>
<div>Time?</div>
</h1>
</figure>
和
* {
margin: 0;
padding: 0;
}
figure {
position: relative;
}
figure video {
width: 100%;
display: block;
}
figure h1 {
position: absolute;
}
这是一个Codepen:https ://codepen.io/tcurdt/pen/MXJpPr/
这是Chrome中众所周知的错误吗?有没有解决的办法?
这是在最近的版本中修复的。更新Google Chrome浏览器后已修复。很简单。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句