gpt4 book ai didi

javascript - 尝试使用 CSS 创建视频登陆页面

转载 作者:行者123 更新时间:2023-11-28 03:11:20 25 4
gpt4 key购买 nike

我正在尝试复制 X Theme 的 Integrity 1 上使用的登陆页面, 但我很难找到一种方法来保持视频全屏并聚焦在中心而不使其成为整个背景。我试过:

<style type="text/css">

body {margin: 0; padding: 0; background-color: green;}

#landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}

video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}


</style>

<body>
<div id="landing">
<video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
<span id="welcome">DISCOVER NATURE'S SECRETS</span>
</div>
</body>

当浏览器处于全屏模式时,它运行完美,但在缩小页面时,着陆视频不会像 X 主题演示那样响应。我打算按照演示放置我的导航栏并向下滚动,这就是背景选项不可能的原因。

如有任何帮助/建议,我们将不胜感激。

最佳答案

他们为此使用了一些 JavaScript,但有一种方法可以不用 JS 来实现。

将您的视频样式更改为:

video {
// Force video to cover screen
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;

// Center video
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

关于javascript - 尝试使用 CSS 创建视频登陆页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45697761/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com