div的背景图像在服务器上的呈现方式不同，但在本地主机上的呈现方式不同

Question

我在页面中的div上添加的背景图像通常显示为拉伸状态，在本地主机上没有重复，但是在服务器上显示为重复。在与此页面类似的另一页上，但是具有不同的配色方案和相同尺寸的图像，它可以正常显示。 这是本地主机：

这是在服务器上：

这是另一个具有相似图像的页面，可以在本地主机和服务器上完美呈现：

网站为here.

Answer 1

您的背景在此页面中出现两次。

• 在.parallax_banner2aa
• 在.parallax_banner2aa::before

我建议您删除:: before中存在的背景。

With the background in ::before Without the background in ::before

Answer 2

重叠的小图像来自其他地方，因为如果您尝试暂时删除实际背景，则重叠图像会保留在原处：

Answer 3

因为您将背景设置在2个地方。

首先在这里

.parallax_banner2aa {
  position: relative;
  background-image: url(../../images/parallax/intro-2aa.jpg);
  height: 100vh;
}

在backgroud-size: cover中：

.parallax {
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-position: 50% 0;
  background-size: cover;
}

第二个没有background-size：

.parallax_banner2aa:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  position: absolute;
  background: url(../../images/parallax/intro-2aa.jpg)  no-repeat;
}

因此，您只需要删除第二个背景或向其中添加backgroud-size: cover，即可解决您的问题。