缩小时，重复y背景图像消失/不对齐

Question

在Firefox上缩小到40％时，图像会消失。直到缩放50％，它很好。然而，在缩放40％时，它只是消失了：

在Chrome中，图像仍然可见，但略有错位，这种情况发生在不同的缩放级别：

一旦Internet Explorer实际显示预期结果，无论缩放！

三叉戟对webkit和gecko的做法有何不同，我该如何修补它？

以下是所有相关代码：

body {
  background-color: rgba(31, 59, 8, 1);
}
#main {
  z-index: 1;
  position: absolute;
  top: 113px;
  left: 50%;
  width: 900px;
  height: 100%;
  margin-top: 160px;
  background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
  background-repeat: repeat-y;
  margin-right: -50%;
  text-align: center;
  transform: translateX(-50%);
}
#main:before {
  content: " ";
  position: absolute;
  left: 0px;
  top: -113px;
  background-image: url('http://i.stack.imgur.com/7DE7i.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 113px;
}
#main:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -200px;
  background-image: url('http://i.stack.imgur.com/DVJAq.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 200px;
}

<div id="main"></div>

Answer 1

将你的body.png图片设置为20px左右将解决问题。 1px重复图像有时会很奇怪。在加载元素时应该有助于重绘/闪烁。

另外，设置＆＃34; #main：之前＆＃34;当你放大（至少对我来说）时，顶部为-112px而不是-113px摆脱了Chrome中的时髦线条。

希望有所帮助。

Answer 2

我不确定，但如果你分割图像并制作3个部分，我相信：     ::之前（白色顶部，底部阴影）     ::标题（红色框）     ::之后（白色底部，红色框顶部阴影）

我希望这个答案有所帮助！