Странное смещение пикселей при масштабировании наложенных изображений в html и css

Question

Проблема возникает при масштабировании двух наложенных изображений (даже одного и того же размера).

В моем сценарии у меня было два прозрачных изображения <img> одного размера (ширина х высота): фоновое изображениеи обрезанный заголовок.Я наложил их на абсолютную позицию в относительном <div> контейнере известной ширины.Я пытался увеличивать и уменьшать масштаб, используя обычную функцию масштабирования браузера, и заметил смещение пикселей между двумя слоями при разных коэффициентах увеличения!Тем не менее, 100% идеально подошло.

Технически, я пытался создать один тег <div> с двумя background-image URL-адресами (с использованием CSS) одинаковых изображений.Я также попытался иметь SVG, который содержит оба изображения PNG.И я пытался использовать изображения разных размеров (всегда одинаковой ширины, разной высоты).

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

. Я также мог бы предложить избавиться от этой нижней части заголовка.В любом случае это должна быть тень, поэтому сделайте ее прозрачной тенью.