html - 响应式背景(视频背景和背景颜色)
问题描述
我想知道是否可以为屏幕(笔记本电脑 992 像素)播放视频背景,而对于较小的设备,是否可以播放没有视频的黑色背景。
我已经用视频背景做了一个例子。
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
推荐阅读
- java - 无法运行 gradle run 命令
- java - VSCode:无法快速访问使用 Spring Boot 工具运行的应用程序
- javascript - NPM 没有安装包。主机名/IP 地址与证书的替代名称不匹配:
- php - Laravel 表单仅提交分配给模型的选定数据
- twitter - 如何将直接消息发送到我的 webhook url
- apache-kafka - 在马拉松比赛中出现重试退避错误并且没有重新启动 kafka-streams
- eclipse - OpenCL 错误:CL_INVALID_PROGRAM OpenCL 错误:CL_INVALID_PROGRAM
- flutter - 如何在flutter中实现类似iOS SplitView的效果
- javascript - 未找到模块:错误:无法解析“@deck.gl/experimental-layers”
- redux - 传递给 Redux reducer 时为 Immutable.js Map 键入注释