JD *_*ang 3 html video html5 google-chrome css3
其他浏览器都可以,但仅限于Chrome,视频播放在顶部,忽略了z-index.
以下是代码,在Chrome中看起来很奇怪.
绝对定位'IUView_4',但它显示在视频下方.
Chrome有什么问题？有办法处理吗？
<style>
#Page {background-color : rgb(255,255,255); position : relative; z-index : 0; width : 100.0%; margin : auto; height : 1300.0px; }
#Movie {background-color : rgb(0,198,245); top : 94.0px; z-index : 0; width : 521.0px; left : 131.0px; height : 242.0px; }
#View {height : 70.0px; width : 100.0px; background-color : rgb(0,164,89); z-index : 1; top : 62.0px; overflow : hidden; left : 435.0px; position:absolute; }
</style>
<body >
<div>
<div id='Page' >
<div id='Movie' >
<video width=100% height=100% poster='res/gazzetta_thumbnail.png' autoplay>
<source src="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" type="video/mp4">
<object data="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" width="100%" height="100%" /> </object>
</video>
</div>
<div id='View' >
</div>
</div>
</div>
</body>
小智 8
我们在我们的网站上遇到了类似的问题,并实现了此堆栈溢出页面中描述的修复.
在我们的例子中,我们将以下CSS添加到相对定位的叠加层(而不是上面链接中描述的固定位置元素),后者在视频后面不断消失:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
在 Google Chrome 64 上，这样做就成功了：
audio, video { position:relative; z-index:-1; }