在部署网站时如何使图像不改变位置？

Question

有人可以解释为什么当我将此静态网站部署到Github页面时，图像无法正确显示吗？

因此，浏览器中的预览如下所示：https://i.stack.imgur.com/cJQ6k.png

这是部署后的显示方式：https://i.stack.imgur.com/mCc0W.png

我以这种方式将图像放置在背景上：

body:after {
  content: "";
  background: url(images/bg-desktop.svg) no-repeat left bottom/990px 570px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

Answer 1

尝试在包含所有内容的节头上使用以下代码

"section {
 background-img:url('img.jpg');
 background-size:cover;
}"  

不确定您为什么将after作为默认背景图像css属性的替代方法。

我知道它没有根据您的问题回答为什么会这样，原因可能是很多因素（从您的代码具有响应能力，而不是使用最小宽度或最小高度，到您监视部署的屏幕，浏览器，您的CSS可能会影响::选择器在您可能拥有的其他普通CSS之后，以改变屏幕比例。），但希望对您有所帮助。