我在全浏览器中使用 HTML5 视频作为背景。
我已经设法将视频对齐到中心和右下角...
居中对齐 css:
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%); /* IE 9 */
-webkit-transform: translateX(-50%) translateY(-50%); /* Opera, Chrome, and Safari */
右下对齐css:
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
但我不知道如何与左上角对齐。
这似乎很难实现 - 一直在寻找这个但还没有找到任何解决方案。有谁知道如何解决这个问题吗？
我正在寻找一个纯 css 解决方案。
谢谢，Niklas
最佳答案
感谢@Chris M 花时间回答我的问题。 我试过 top:0;左:0； &那是行不通的。 视频的一部分正在显示 - 似乎右下角更准确...... 这是 fiddle 示例的链接: Fiddle
<!DOCTYPE html>
<body>
<video loop="true" id="bgvideo" preload="true" autoplay="true">
<source src="video/turn.webm" type="video/webm">
<source src="video/turn.mp4" type="video/mp4">
</video>
</body>
#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%); /* IE 9 */
-webkit-transform: translateX(-50%) translateY(-50%); /* Opera, Chrome, and Safari */
}
关于html - 如何将全浏览器 HTML5 视频背景与左上角对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23700009/