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

Question

缩放两个叠加图像(即使大小相同(时出现问题。

在我的场景中，我有两个相同大小(宽 x 高(<img>透明图像：背景图像和裁剪的标题。我在已知宽度的相对<div>容器中以绝对位置覆盖它们。我尝试使用正常的浏览器缩放功能放大和缩小，我注意到不同缩放系数上两层之间的像素偏移！然而，100%是一个完美的选择。

从技术上讲，我尝试使用一个带有相同图像的两个background-imageURL(使用CSS(的<div>标签。我还尝试拥有一个包含两个 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;
}

我也可以建议摆脱这种锋利的切割形式标题底部。无论如何，它应该是阴影，所以让它成为透明的阴影。