Question

有没有办法混合两个PNG图像，以便在它们都有alpha边框时完美匹配？

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

＆＃13;

img {
  position: absolute;
  left: 0px;
  top: 0px;
}

.container {
  height: 512px;
  width: 512px;
}

＆＃13;

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

＆＃13;

或指向CodePen

的链接

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

但是当在HTML / CSS中创建相同的情况时，我们在元素之间得到了一条白线。在对混合混合模式和背景混合模式进行一些阅读并对它们进行一些测试后，它似乎没有帮助。我们认为两个图像（它们的alpha通道）都预先与背景相乘，这就是为什么你会在它们之间得到半透明线（边框所在的位置）。

有没有办法用CSS实现这一点，甚至可能是JavaScript / jQuery？

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

Answer 1

这不是与背景预乘的问题 - 沿着边界，你在同一位置的两个图像中都有部分透明的像素，这让背景渗透。 50％透明度加50％透明度不等于100％不透明。

我认为你需要自己调整图像蒙版，而不是摆弄阴影或像素调整来修补问题。（我不相信会有这样的CSS或JS解决方案，因为没有编程方法来确定预期结果是什么。）

如果您只堆叠两张图片，这很容易 - 不要在“底部”图片上放置任何Alpha通道，只在“顶部”图片上放置一个，然后就完成了。

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

如果图像之间的边界会导致此渗透，请在堆栈中的“底部”图像上使用1位Alpha通道。因此，如果您将“球体”图像堆叠在“立方体”图像上方，则立方体沿球体和立方体之间的边界将没有部分透明度，沿边界的所有像素将是100％不透明的。球体的部分透明度会使边界平滑，因此您看不到像素化的边缘。
使底部图像上的蒙版比当前大一个像素。这是完成（1）的懒惰方式。
预先乘以图像本身的颜色 - 不是与背景相对应，而是与其他重叠的图像相乘。沿边界的颜色变暗，以弥补否则会渗透的白色。（可能很明显，这个在我的专业领域之外有一点点，所以我不能确切地建议如何计算精确的颜色......）

Answer 2

存在较小的像素差异。将你的立方体移动到1px到顶部并向左移动你就可以了。

img {
  position: absolute;
  left: 0px;
  top: 0px;
}
#cube{
  top:-1px;
  left:-1px;
}
.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" id="cube" alt="Cube">
    </div>

Answer 3

尝试帮助完整解决方案

我只添加了一些css .container img:last-child{ left: -1px; top:-1px; position:absolute }

＆＃13;

img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
 .container img:last-child{ left: -1px; top:-1px; position:absolute }
 
        .container {
            height: 512px;
            width: 512px;
        }

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

img {
    position: absolute;
    left: 0px;
    top: 0px;
    filter: drop-shadow(0 0 1px #000);
}

.container {
    height: 512px;
    width: 512px;
}

＆＃13;

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

＆＃13;

使用CSS混合两个带有alpha边框的.png图像

4 个答案: