Question

我想在另一个彩色的png上放一个logo png。他们都有透明的背景。当我尝试这个时，图像混合在一起。奇怪的是，在Photoshop中，徽标保留了它的不透明性 - 我将颜色放在它下面的图层上，另一个图像等等，徽标仍然是不透明的。

我想这样做，所以我可以旋转背景图像。

我该如何解决这个问题？

[edit]我已经制作了一个示例图片：http://i.imgur.com/XtoGn.png

左边是我想要发生的，右边是所有浏览器上发生的事情（我知道背景不是透明的但是请耐心 - 它们都是透明的png，背景有渐变图层蒙版）。我把像这样的图像

<div>
    <img id="backgroundImg" style="position: absolute; top: 0;" src="/Images/background.png" />
    <img id="logoImg" src="/Images/logo.png" />
</div>

我不完全确定我在PS中使用的混音模式。

如果有人想尝试，我已经制作了两个测试PNG。 abload.de/img/flagf25ea.png abload.de/img/logo9k4ol.png

Answer 1

当设计师使用PhotoShop对事物进行分层时，这是一个常见问题。在分层单个图像时，不能使用混合模式，而不是PhotoShop图层。

您需要在PhotoShop中使用您的设计而不在图层上使用混合模式，这样当您单独堆叠图层时，它们看起来会一样。您可能将“LOGO”图层设置为“Lighten”或“Multiply”。在设置为“Normal”之前需要向右看，然后才能取出单个图层并将其覆盖为图像

Answer 2

解决了问题 - 问题出在z-index上 - 我没有为两个图像指定它们。将徽标的索引设置为高于背景，并且png不会相互混合。

[edit] Whups，事实证明position:absolute也必须在样式中应用。

（HTML）PNG在另一个PNG之上 - 可能消除完全透明度？

2 个答案: