缩小时，重复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图像高20像素左右将解决问题。 1px重复图像有时会很奇怪。 在加载元素时应该有助于重绘/闪烁。

此外，将“#main：before”设置为顶部-112px而不是-113px时放大Chrome中的时髦线（至少对我而言）。

希望有所帮助。

Answer 2

我不确定，但我相信如果你拆分图像并制作3个部分：:: before（白色顶部，底部阴影）:: header（红色框）:: after（白色底部，顶部阴影来自红色框）

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