背景不起作用，它会上升并被切成两半

Question

我正在创建一个网站登录窗口，背景是一张图片，但图片总是被切成两半并向上。

这是我正在使用的代码：

.loginbody {
    background: url(img/LoginBackground3.jfif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: sans-ser``if;   
}

this is what it lookslike

Answer 1

如果不查看您的 HTML 也很难判断，但您的包含元素可能不是视口的完整高度。

如果您想制作始终填充视口的全屏背景图像，请将您的 CSS 应用于页面的 html 元素：

html { 
  background: url(img/LoginBackground3.jfif) no-repeat center center fixed; 
  background-size: cover;
}

或者，您可以将loginbody 元素上的视口高度设置为100vh，使其成为视口的完整高度：

.loginbody {
    background: url(img/LoginBackground3.jfif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
    height:100vh;   
}