无法在视频上对齐文本
Cant align text over video
我设计了一个着陆页,但它在移动设备上无法正常工作。
Image 1 Mobile : This is what my interface looks like currently on mobile.
Image 2 Desktop : This is what it looks like on desktop.
问题:我希望移动设备的外观与桌面设备的外观相同。
我的代码如下:
body {
position: relative;
overflow: hidden;
background-color:black;
font-family: 'Chakra Petch', sans-serif;
color: white;
}
video {
position: absolute;
top: 0;
width:100% !important;
z-index: 1;/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.6;
}
.container {
z-index: 2;
position: relative;
padding-top: 200px;
}
.btn{
background-color: #36454f !important;
border-color: #36454f !important;
}
.btn:hover{
background-color: #476376 !important;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anomaly Detection Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<video autoplay muted loop>
<source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&profile_id=139&oauth2_token_id=57447761" type="video/mp4"> </video>
<div class="container">
<span style="font-size: 63px">Anomaly Detection Portal</span>
<span>
<h4>
Use our state-of-the-art technology to find out anomalies in your traffic videos.
</h4>
<h5>
Our futuristic models give the maximum accuracy in more than 90% of the cases.
</h5>
</span>
<a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
</div>
<!-- /.container -->
</div>
<!-- /.jumbotron -->
</div>
</div>
</body>
您可以使用字体缩放和动态填充来完成这项工作
我做了什么:
- 将字体大小更改为 vw(视口宽度)
- 将内边距更改为 10%(从最初的 200 像素)
- 也使用 vw 为字幕添加了字体大小
如果您不喜欢这个结果,可以稍微调整一下值
这不是 100% 相同,但非常接近
注意:您还可以使用 calc(vw 和 px 一起)的混合方法来避免文本不可读,如下面的 link 中所述
更多关于视口的信息here
body {
position: relative;
overflow: hidden;
background-color:black;
font-family: 'Chakra Petch', sans-serif;
color: white;
}
video {
position: absolute;
top: 0;
width:100% !important;
z-index: 1;/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.6;
}
.container {
z-index: 2;
position: relative;
padding-top: 10%;
}
.btn{
background-color: #36454f !important;
border-color: #36454f !important;
}
.btn:hover{
background-color: #476376 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anomaly Detection Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<video autoplay muted loop>
<source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&profile_id=139&oauth2_token_id=57447761" type="video/mp4"> </video>
<div class="container">
<span style="font-size: 6vw">Anomaly Detection Portal</span>
<span>
<h4 style="font-size: 2.5vw">
Use our state-of-the-art technology to find out anomalies in your traffic videos.
</h4>
<h5 style="font-size: 2vw">
Our futuristic models give the maximum accuracy in more than 90% of the cases.
</h5>
</span>
<a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
</div>
<!-- /.container -->
</div>
<!-- /.jumbotron -->
</div>
</div>
</body>
</html>
我设计了一个着陆页,但它在移动设备上无法正常工作。
Image 1 Mobile : This is what my interface looks like currently on mobile.
Image 2 Desktop : This is what it looks like on desktop.
问题:我希望移动设备的外观与桌面设备的外观相同。
我的代码如下:
body {
position: relative;
overflow: hidden;
background-color:black;
font-family: 'Chakra Petch', sans-serif;
color: white;
}
video {
position: absolute;
top: 0;
width:100% !important;
z-index: 1;/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.6;
}
.container {
z-index: 2;
position: relative;
padding-top: 200px;
}
.btn{
background-color: #36454f !important;
border-color: #36454f !important;
}
.btn:hover{
background-color: #476376 !important;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anomaly Detection Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<video autoplay muted loop>
<source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&profile_id=139&oauth2_token_id=57447761" type="video/mp4"> </video>
<div class="container">
<span style="font-size: 63px">Anomaly Detection Portal</span>
<span>
<h4>
Use our state-of-the-art technology to find out anomalies in your traffic videos.
</h4>
<h5>
Our futuristic models give the maximum accuracy in more than 90% of the cases.
</h5>
</span>
<a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
</div>
<!-- /.container -->
</div>
<!-- /.jumbotron -->
</div>
</div>
</body>
您可以使用字体缩放和动态填充来完成这项工作
我做了什么:
- 将字体大小更改为 vw(视口宽度)
- 将内边距更改为 10%(从最初的 200 像素)
- 也使用 vw 为字幕添加了字体大小
如果您不喜欢这个结果,可以稍微调整一下值
这不是 100% 相同,但非常接近
注意:您还可以使用 calc(vw 和 px 一起)的混合方法来避免文本不可读,如下面的 link 中所述
更多关于视口的信息here
body {
position: relative;
overflow: hidden;
background-color:black;
font-family: 'Chakra Petch', sans-serif;
color: white;
}
video {
position: absolute;
top: 0;
width:100% !important;
z-index: 1;/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.6;
}
.container {
z-index: 2;
position: relative;
padding-top: 10%;
}
.btn{
background-color: #36454f !important;
border-color: #36454f !important;
}
.btn:hover{
background-color: #476376 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anomaly Detection Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<video autoplay muted loop>
<source src="https://player.vimeo.com/external/368320203.sd.mp4?s=38b1bac5d627b94fb902597643461ee5f233d00a&profile_id=139&oauth2_token_id=57447761" type="video/mp4"> </video>
<div class="container">
<span style="font-size: 6vw">Anomaly Detection Portal</span>
<span>
<h4 style="font-size: 2.5vw">
Use our state-of-the-art technology to find out anomalies in your traffic videos.
</h4>
<h5 style="font-size: 2vw">
Our futuristic models give the maximum accuracy in more than 90% of the cases.
</h5>
</span>
<a class="btn btn-primary btn-md" href="login" role="button">Proceed Ahead.</a>
</div>
<!-- /.container -->
</div>
<!-- /.jumbotron -->
</div>
</div>
</body>
</html>