5

在 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;
}
<div id="main"></div>

4

2 回答 2

2

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

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

希望有帮助。

于 2015-10-26T21:57:59.693 回答
1

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

我希望这个答案有帮助！

于 2015-10-31T15:38:03.723 回答