在HTML和CSS缩放叠加图像时，一个奇怪的像素偏移

Question

缩放2个重叠图象（甚至相同大小）时出现的问题。

在我的情况下，我有同样的尺寸（宽×高）的两个透明图像<img>：一个背景图像和裁切头。我重叠它们与公知的宽度的相对<div>容器中的绝对位置。我试图进出使用普通浏览器缩放功能进行放大，我注意到像素两层之间的偏移不同的变焦倍数！然而，100％是一个完美的结合。

从技术上讲，我想有相同的两个图像<div>网址（使用CSS）一个background-image标签。我也试过有同时拥有PNG图像的SVG。我曾尝试使用不同尺寸（总宽度相同，不同的高度）的图像。

我的实验NONE工作。总是有不同的缩放偏移。

我想知道，如果有人有这样的行为做出解释，我只是失去了一些东西？

---

最后，优选的解决方案是在画布上绘制图像和应用在其上的变焦。

我已经创建了如下的jsfiddle来证明我的问题：首先，宽度为100％，试放大和缩小使用按钮，并观察偏移。

function zoomIn() {
  var width = 0;
  $('img').each(function() {
    $(this).width($(this).width() * 1.1);
    width = $(this).width() / 1918 * 100;
  });
  $('#size').text(Number.parseFloat(width).toPrecision(4) + "%");
}

function zoomOut() {
  var width = 0;
  $('img').each(function() {
    $(this).width($(this).width() / 1.1);
    width = $(this).width() / 1918 * 100;
  });
  $('#size').text(Number.parseFloat(width).toPrecision(4) + "%");
}

document.getElementById("zoomIn").addEventListener("click", zoomIn);
document.getElementById("zoomOut").addEventListener("click", zoomOut);

body {
  background: #20262E;
  font-family: Helvetica;
}

.container {
  position: relative;
  width: 1918px;
}

#size {
  color: white;
  font-size: 15px;
  background-color: black;
  opacity: 0.4;
  position: fixed;
  padding: 10px 10px 10px 10px;
}

footer {
  position: absolute;
  bottom: 0;
}

img {
  position: absolute;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="https://imgur.com/N1BK4Kk.png">
  <img src="https://imgur.com/LFG04gn.png">
</div>

<div id="size">

</div>

<footer>
  <button id="zoomIn">zoom in</button>
  <button id="zoomOut">zoom out</button>
</footer>

Answer 1

底部图像具有透明矩形顶部区域。没有梯度 - 它是从透明到白色的尖锐过渡。这种说法只适用于100％缩放。一旦你开始放大，抗混叠将生效。只有图像的边界将被浏览器放置像素完美。但是，当涉及到“在该Y坐标使白色的区域划分成透明的”问题的图像内的抗混叠不能像素精确。如果这透明区域高于预期只是一点点，它会在其它图像的下方延伸。也许只是一个像素线的一小部分。但随后的灰色背景将彪炳。这是因为不透明的白色和透明之间抗锯齿将是半透明的灰色。根据不同的变焦，您将得到有时会出现“重叠”，有时“下叠”，因为顶部图像的边界仍然会呈现完美的像素。你的假设是完全涵盖了顶级图像第二图像的透明区域。这通常会用CSS工作，但如果你只是想掩盖第二图像像素完美的一小部分。所以它种很有意义。摆脱透明区域来解决这个问题？如果此网页的一般风格是白色的，也许只是改变身体的背景颜色为白色一个快速的解决方案吗？

Answer 2

现在看来，这只是显示问题。当变焦比100％的不同它不适合用好足够的精度像素大概浏览器有关。我能想出的最好的是image-rendering但它会降低图像质量

img {
    position: absolute;
    image-rendering: optimizespeed;
}

我还可以建议摆脱这种大幅削减形式头底部的。它应该被阴影反正所以使它透明的影子。