Question

缩放两个重叠的图像（即使尺寸相同）时也会出现问题。

在我的场景中，我有两个大小（宽x高）相同的透明图像<img>：背景图像和裁剪的标题。我在一个已知宽度的相对<div>容器中以绝对位置覆盖了它们。我尝试使用普通的浏览器缩放功能进行放大和缩小，并且我注意到在不同缩放系数下两层之间的像素偏移！但是，100％非常合适。

从技术上讲，我尝试使用一个<div>标签和两个background-image URL（使用CSS）相同的图像。我还尝试过拥有同时包含两个PNG图像的SVG。而且我尝试使用不同大小的图像（总是相同的宽度，不同的高度）。

我的实验中

无有效。在不同的缩放比例上总会有偏移。

我想知道是否有人对这种行为有解释，或者我只是在这里遗漏了什么？

最终，首选的解决方案是在画布上绘制两个图像并对其进行缩放。

我创建了以下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;
}

我还建议您摆脱这种尖锐的表格标题底部。无论如何它都应该是阴影，因此请使其成为透明阴影。

在html和css中缩放叠加图像时出现奇怪的像素偏移

2 个答案: