javascript - 将两个带有 alpha 边框的 .png 图像与 CSS 混合

Question

当两个 PNG 图像都带有带 alpha 的边框时，是否有办法混合它们以完美匹配？

这是我遇到的问题的示例:

img {
  position: absolute;
  left: 0px;
  top: 0px;
}

.container {
  height: 512px;
  width: 512px;
}

<div class="container">
  <img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
  <img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>

或指向 CodePen 的链接

情况是我有两个保存为 PNG 的 3D 渲染图，并且都具有透明度为 50% 的 alpha 边框，如果您在 Photoshop 和/或 After Effects 中合并它们，它们将完美匹配。

但是当在 HTML/CSS 中创建相同的情况时，我们在元素之间得到了一条白线。 在阅读了一些有关mix-blending-mode 和background-blending-mode 的内容并对其进行了一些测试后，它似乎没有帮助。我们认为这两个图像(它们的 alpha channel )都与背景预乘，这就是为什么它们之间会出现半透明线(边界所在的位置)。

有没有办法用 CSS 甚至 JavaScript/jQuery 来实现这一点？

编辑:所以我们不会对图像移动和 css 技巧进行更多评论。不能选择删除 1px 或隐藏它，因为大图的外观不会相同。

Answer 1

这不是与背景预乘的问题——而是沿着边界，您在同一位置的两个图像中有部分透明的像素，这会让背景渗出。 50% 透明度加上 50% 透明度不等于 100% 不透明。

我认为您需要自己调整图像 mask ，而不是事后摆弄阴影或像素调整来解决问题。 (我不相信会有 CSS 或 JS 解决方案，因为没有编程方式来确定预期结果是什么。)

如果您只堆叠两张图像，这很简单——不要在“底部”图像上放置任何 alpha channel ，只在“顶部”图像上放置一个，就完成了。

如果您需要堆叠两个以上(或者如果您需要在背景图像上使用 mask 以允许页面背景显示出来)，您将有几个选择:

1. 只要图像之间的边界会导致这种渗透，请在堆栈中的“底部”图像上使用 1 位 alpha channel 。因此，如果您将“球体”图像堆叠在“立方体”图像上方，则立方体沿球体和立方体之间的边界将没有部分透明度，沿边界的所有像素将是 100% 不透明的。球体的部分透明度会使边界变得平滑，因此您不会看到像素化的边缘。
2. 使底部图像上的蒙版比当前大一个像素。这是完成 (1) 的惰性方法。
3. 预乘图像本身的颜色 - 不是与背景相乘，而是与否则会重叠的其他图像相乘。沿边界的颜色变暗以弥补白色，否则会渗出。 (很明显，这有点超出我的专业领域，所以我无法确切地建议如何计算精确的颜色...)