Question

我使用HTML5视频作为背景＆amp;在fullbrowser 我设法将视频与中心对齐到右下角...

中心对齐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

Answer 1

感谢@Chris M抽出时间回答我的问题。我试过顶：0;左：0; ＆安培;这不起作用。视频的一部分正在显示 - 看起来像右下角更准确...... 这是一个小提琴示例的链接： 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 */
}

Answer 2

这取决于您对“左上角对齐视频”的定义请记住，您有两个约束：

约束（i）：视频必须填满整个屏幕。
Constaint（ii）：必须保留视频宽高比。

当您需要同时满足这两个约束时，“左上对齐”没有明确的含义。对我来说，你最接近的是选项 A 。

A。您希望视频填满屏幕，此外，其左边缘和右边缘永不修剪。

def double(source):
    word = []
    for x in range(len(source)):
        word.append(source[x]*(x+1))
    print(''.join(map(str, word)), end="")


double("dog")

input()

无论您如何调整浏览器窗口的大小，视频的左边缘和视频的上边缘都不会被修剪。它们将始终可见。看到这个小提琴并尝试调整框架大小。

注意：如果您拖动屏幕的左侧，视频可能看起来像是“从右侧扩展”，但必须这样做才能确保视频仍然在屏幕上。它必须这样做，否则约束（i）或约束（ii）将被打破。不要让这让你感到困惑。唯一的其他选择是删除约束（i）或constaint（ii）。

B。如果你想要（ii）但不关心（i）

video { 
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

再次，左边缘和右边缘永远不会被修剪。但是，视频不会覆盖页面的某些部分。

C。如果你想（i）但不关心（ii）

不可能：请参阅：https://stackoverflow.com/a/19874201/3649209
浏览器始终保留video { position: fixed; width: 100%; top: 0%; left: 0%; } s的比率。

Answer 3

你尝试过这个：

position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
max-width: 100%;
z-index: -100;

如何将完整浏览器HTML5视频背景与左上角对齐？

3 个答案: