缩小时重复-y 背景图像消失/未对齐答案

【问题标题】：A repeat-y background-image disappears/misaligns when zooming out缩小时重复-y 背景图像消失/未对齐
【发布时间】：2015-10-17 17:09:12
【问题描述】：

在 Firefox 上缩小到 40% 时图像会消失。直到缩放 50%，这都很好。然而，在放大 40% 时，它就消失了：

而在 Chrome 中，图像仍然可见，但略微未对齐，这发生在不同的缩放级别：

这一次 Internet Explorer 实际上显示了预期的结果，无论缩放如何！

trident 与 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;
}

&lt;div id="main"&gt;&lt;/div&gt;

【问题讨论】：

您使用的是什么版本的 Chrome 和 Firefox？我没有在 Windows 上尝试过，但在我的 Mac 上的 Chrome 和 Firefox 上，它加载正确。
Chrome 43,45,46 和 Firefox 38（我认为是 32？）都在 Windows 8.1 上显示了这种行为。这些是相当随机的版本，我只是在更新浏览器时对其进行了测试；我希望有一个补丁，但问题仍然存在。
w10 下的最新 Firefox 并没有复制您的问题。它工作得很好。无论如何，即使这些天的浏览器比以前工作得更好，在使用 px 时，我仍然尽量避免使用奇数。它经常与布局混淆（在您的情况下是 113px 的最高值）
在 Windows 8 上当前版本的 Chrome 和 Firefox 上不会出现此消失问题。当缩放到奇数缩放级别时，由于像素舍入不良，Chrome 中会出现线条。请查看border-radius 和box-shadow。您对图像所做的所有事情都可以通过使用当前所有浏览器都支持的纯 css 轻松实现。
@jaunt border-radius 和 box-shadow 在除 IE caniuse.com/#feat=css-boxshadow, caniuse.com/#search=border-radius) 之外的所有浏览器中均受支持。如今，渲染几乎相同。如果您使用图片，请注意，如果您不上传太大的图片（这会影响页面加载时间），高分辨率屏幕会显示模糊。

标签： html css zooming background-repeat

【解决方案1】：

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

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

希望对您有所帮助。

【讨论】：

虽然 20 像素的解决方案是一个很好的方法，但我计划在页面上垂直增长/缩小对象，让页面大小跳变看起来不太好。感谢您对定位的建议，因为图像是 113px 高，它会导致 1px 重叠，所以我将只更改图像的大小。我很好奇为什么这在 IE 中没有发生，但在更流行的浏览器中却发生了，而不是我对实际解决方案的看法；任何带有解释的修复都非常感谢:)

【解决方案2】：

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

我希望这个答案有帮助！

【讨论】：

你能有::before::before吗？标头是通过使用带有伪类选择器::before 的图像来定义的，这是更可取的，因为它允许旧版本的浏览器以与现代浏览器相同的方式呈现它。
很抱歉回答迟了，但我相信这行得通。现在我对此并不专业：D