gpt4 book ai didi

html - 响应式背景(视频背景和背景色)

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

我想知道是否可以为屏幕(笔记本电脑 992 像素)播放视频背景,以及为较小的设备播放没有视频的黑色背景。

我已经做了一个 example有视频背景。

HTML代码

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Login/Logout animation concept</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
</head>

<body>
<header class="video-header container">
<div class="fullscreen-video-wrap">
<video src="https://s3.envato.com/h264-video-previews/35654d71-df62-4468-9680-6c0bf9a95ff2/12292237.mp4" autoplay="true" muted="true" media="screen and (min-width:800px)">
</video>
</div>
</header>
</body>

</html>

CSS 代码

.video-header {
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}

.container {
max-width: 960px;
padding: 0 10px;
margin: auto;
text-align: center;
}

.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}

.fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
}

希望有人能帮我解决这个问题。提前致谢!

最佳答案

只需使用媒体查询并为不同的屏幕设置不同的背景。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp

关于html - 响应式背景(视频背景和背景色),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50896435/

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