有没有一种方法可以混合两个 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 中创建相同的情况时,我们在元素之间有一条白线。在阅读了一些关于混合混合模式和背景混合模式并用它们进行一些测试之后,它似乎没有帮助。我们认为这两个图像(它们的 alpha 通道)都与背景预乘,这就是为什么你会在它们之间得到半透明线(边界所在的位置)。
有没有办法用 CSS 甚至 JavaScript/jQuery 来实现这一点?
编辑:所以我们不会对图像移动和css技巧进行更多评论。删除该 1px 或隐藏它不是一个选项,因为大图片不会具有相同的外观。