3

有没有一种方法可以混合两个 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 或隐藏它不是一个选项，因为大图片不会具有相同的外观。

4

4 回答 4

3

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

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

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

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

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

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

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

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

于 2017-09-15T13:15:16.117 回答
0

存在细微的像素差异。将你的立方体向上和向左移动 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>

于 2017-09-15T12:54:18.017 回答
0

尝试帮助完整的解决方案

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

img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
 .container img:last-child{ left: -1px; top:-1px; position:absolute }
 
        .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>

于 2017-09-15T12:56:40.657 回答