我希望这个 ASP.NET Core 页面看起来相似,但我不知道为什么上面仍然有白色边框。
截图
index.cshtml
:
@{
ViewData["Title"] = "Home Page";
}
<div class="no-margins">
<div class="text-center">
<video autoplay muted loop id="video-bg">
<source src="https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/items/534380/36d92e465af833290ff1def5b2de70c8c534a81d.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Vítam vás. Táto stránka je o mne. <br> Poukazuje na to čo mám rád a kto som.</h1>
<p>Ďakujem za návštevu.</p>
</div>
</div>
</div>
Site.css
:
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbar-light.bg-white {
background-color: #212529 !important;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-toggler-icon,
.navbar-light .navbar-text {
color: #ffffff !important;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
color: #cccccc !important;
}
.social-icons img {
width: 15px;
margin-left: 10px;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
margin-right: 10px;
height: 50px;
}
.body {
height: 100%;
margin: 0;
padding: 0;
}
.no-margins {
margin: 0 !important;
padding: 0 !important;
}
.video-bg {
padding-left: 0px !important;
padding-right: 0px !important;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
z-index: -1;
object-fit: cover;
}
.content {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-30%, -50%);
text-align: left;
z-index: 100;
color: white;
max-width: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
background-color: #212529;
color: white;
}
我正在寻找没有白边的解决方案。
除非有您未共享的布局页面,否则您将缺少 html、head 和 body 部分。试试这个(css和div不变):
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbar-light.bg-white {
background-color: #212529 !important;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-toggler-icon,
.navbar-light .navbar-text {
color: #ffffff !important;
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
color: #cccccc !important;
}
.social-icons img {
width: 15px;
margin-left: 10px;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
margin-right: 10px;
height: 50px;
}
.body {
height: 100%;
margin: 0;
padding: 0;
}
.no-margins {
margin: 0 !important;
padding: 0 !important;
}
.video-bg {
padding-left: 0px !important;
padding-right: 0px !important;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
z-index: -1;
object-fit: cover;
}
.content {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-30%, -50%);
text-align: left;
z-index: 100;
color: white;
max-width: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
background-color: #212529;
color: white;
}
<html>
<head></head>
<body>
<div class="no-margins">
<div class="text-center">
<video autoplay muted loop id="video-bg">
<source src="https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/items/534380/36d92e465af833290ff1def5b2de70c8c534a81d.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Vítam vás. Táto stránka je o mne. <br> Poukazuje na to čo mám rád a kto som.</h1>
<p>Ďakujem za návštevu.</p>
</div>
</div>
</div>
</body>
</html>