我的HTML看起来是这样的。我试图制作一个有封面和按钮的登录页。这是我第一次在一个真正的项目上工作，偶然发现这个问题，页面没有太多元素，只有一个按钮
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.wrap {
background-image: url("../desktop.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@media (max-width: 39.9375em) {
.wrap {
background-image: url("../mobile.jpg");
}
}
.btn {
font-size: 1rem;
display: inline-block;
padding: 1rem 4rem;
background: #e6a503;
border: 0;
border-radius: 50px;
cursor: pointer;
font-weight: 900;
color: black;
-webkit-transition: opacity 100ms ease-in-out;
transition: opacity 100ms ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.9;
}
.btn:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.btn-container {
position: absolute;
bottom: 20%;
left: 25%;
}
@media (max-width: 39.9375em) {
.btn-container {
top: 35%;
left: 70;
}
}<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" />
<link rel="stylesheet" href="dist/style.css" />
<title>title</title>
</head>
<body>
<div class="wrap">
<div class="btn-container">
<a href="https://www.google.com/" class="btn" target="_blank"
>အကောင့်ဖွင့်ရန်</a
>
</div>
</div>
</body>
</html>是什么导致了空白？而且我的按钮在不同的浏览器中跳转请帮忙。提前谢谢。
这个空白
您的问题是用于放置背景图像的css。如果你想让图像覆盖所有背景，你首先需要把它放在身体上。不在wrap上。
然后使用以下css：
body {
background-image: url(../desktop.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
如您所见，我将background-position更改为center。
如果您真的想只在包装上使用图像，那么也可以将background-position更改为center。此外，您还需要以下换行css，以确保它适合整个页面：
position: absolute;
top: 0;
width: 100%;
height: 100vh;
注意position: absolute;，这是top:0工作所必需的。在桌面上，它运行得很好。在移动设备上，包裹组件可能没有覆盖整个窗口。
关于你的按钮的中心，看看这个。只需在按钮容器上使用以下css：
.btn-container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
正如你所看到的，它不是使用顶部和左侧的33%，而是使用50%，然后将按钮的位置50%转换到按钮的左侧(最后50%取决于按钮的大小(。