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

当两个PNG图像上都有alpha边框时，有没有办法混合两个PNG图像以实现完美匹配

这是我遇到的问题的一个例子：

img{
位置：绝对位置；
左：0px；
顶部：0px；
}
.集装箱{
高度：512px；
宽度：512px；
}

---

存在微小的像素差异。将立方体向上向左移动1px，就可以开始了

img{
位置：绝对位置；
左：0px；
顶部：0px；
}
#立方体{
顶部：-1px；
左：-1px；
}
.集装箱{
高度：512px；
宽度：512px；
}

---

尝试帮助完整解决方案

我只添加了一些css

。容器img:last child{left:-1px；top:-1px；position:absolute}

img{
位置：绝对位置；
左：0px；
顶部：0px；
}
.container img:最后一个子项{左：-1px；上：-1px；位置：绝对}
.集装箱{
高度：512px；
宽度：512px；
}

---

不幸的是，如果不实际移动元素或修改实际图像，就无法消除该间隙。但是，您可以通过对每个图像应用阴影来隐藏它来伪造它。有点像化妆来去除瑕疵。不过，这确实会在图像的边缘添加一点模糊，所以这不是一个完美的解决方案

img{
位置：绝对位置；
左：0px；
顶部：0px；
过滤器：投影（0.1px#000）；
}
.集装箱{
高度：512px；
宽度：512px；
}

---

这不是与背景的预乘问题，而是沿着边界，两幅图像在同一位置上都有部分透明的像素，这让背景渗透进来。50%透明度加上50%透明度并不等于100%不透明

我认为你需要自己调整图像遮罩，而不是在事后通过调整阴影或像素来解决问题。（我不相信会有CSS或JS解决方案来解决这个问题，因为没有编程方法来确定预期的结果。）

如果只叠加两个图像，这很容易——不要在“底部”图像上放置任何alpha通道，只在“顶部”图像上放置一个通道，就完成了

如果您需要堆叠两个以上的页面（或者如果您需要在背景图像上设置一个遮罩以允许页面背景显示），您将有几个选项：

如果图像之间的边界会导致出血，请在堆栈中的“底部”图像上使用1位alpha通道。因此，如果将“球体”图像堆叠在“立方体”图像上方，立方体在球体和立方体之间的边界上没有部分透明度，边界上的所有像素都将是100%不透明的。球体的部分透明度将平滑边界，因此您不会看到像素化条纹

使底部图像上的遮罩比当前大一个像素。这是一种懒惰的完成方式

将图像本身的颜色进行预倍增-不是与背景，而是与其他可能重叠的图像进行预倍增。沿边界的颜色变暗，以弥补白色，否则会流血通过。（很明显，这一点有点超出了我的专业领域，因此我无法确切地建议如何计算精确的颜色…）

---

谢谢你的回复，但我没有尝试移动图像，这样他们会混合，这只是一个快速修复，但不是一个解决方案。想象一下，如果你在图片中有更多的元素，你将不得不使用其中的每一个元素，最终你不会得到与以前相同的图像。谢谢你的重放，但这不是丢失1px的解决方案。那么你在说哪条白线呢？正如我说的，这是图像的一部分，它们有1px边框，alpha值为50%，如果你把它们联系在一起，你应该得到正确的边界颜色。我们并没有试图失去那个像素，因为大图片看起来会不一样，“如果你在Photoshop中合并它们，会做一个完美的匹配”hum nope@Kaido如果你在AF中使用Alpha Add模式，他们会做。我不确定prntscr是否将png保存为索引，如果是在Photoshop中，您必须在sRGB中转换图像，因为Photoshop无法处理索引图像非常好谢谢您的回答Daniel，是的，您的选项是解决问题的一种方法，但我们试图避免更改图像，因为我们会遇到不同元素和不同颜色图像数量的情况，这意味着3D中的每个对象都需要手动调整。这就是为什么我要用CSS3、HTML5或JavaScript/jQuery来搜索解决方案，这样我们就不必更改每一张图片了，完全理解——我希望我能为您提供一个更简单的解决方案，但我认为事后没有任何方法可以做到这一点。如果是我，我会先尝试“使遮罩更大”的方法，因为这是最简单的方法，看看结果是否可以接受。@Pece，如果你对js解决方案满意，为什么不直接用webGL生成这些形状？@Kaido因为这些是示例形状，3D模型可以而且将比webGL处理复杂模型更复杂，别担心。