Html 调整图像大小时，透明背景变为白色

我有一个HTML页面，我需要呈现3个图像，一个在另一个上面

<div id="preview">
    <img src="transparent-image">
</div>

前两幅图像使用CSS属性背景混合模式：multiply混合在一起，在此基础上，我将最后一幅图像（透明图像）与透明背景混合在一起（想象一张房间的照片，墙壁区域是透明的）

结果正是我想要的，但当我试着

#preview{
    width:100%
}

使其具有响应性；它工作完美无瑕，但在ios上，透明度已经丧失。 我在Chrome、Safari和Firefox（iOS）上测试了这种行为。在Chrome、Safari、OSX上的Firefox、Android和Windows上都没有问题

有什么我遗漏的吗？谢谢你抽出时间

编辑：

layer0图像和透明图像是相同的图像，layer0图像没有透明度，与layer1图像相乘，然后在这个混合图像的顶部放置透明图像

我尝试用另一个图像更改透明图像，问题似乎是layer0图像和layer1图像之间的混合，但由于layer0图像和透明图像是相同的，起初我认为存在透明度问题

透明度是存在的，但当放置到该位置时，div#preview的高度为0px

#preview{
    width:100%;
    height:auto;
}

显示没有混合

EDIT2：

---

我正在添加一个示例来显示和复制错误：

好的，我终于找到了问题。具有：

#preview{
    background-image:url(layer0-image), url(layer1-image);
    background-size:100%, 100px;
    background-blend-mode: multiply;
    width: 820px;
    height: 350px;
}

然后设置：

#preview{
    width:100%;
}

造成错误的原因。要修复它，我尝试设置：

#preview{
    width:100%;
    background-size:cover, 100px;
}

---

即使我不清楚为什么会发生这种情况，这个问题也没有了。

您必须使用WebKit设置透明度。透明图像是一个带有透明度的PNG。嗯。。。它适用于OSX和mobile safari，不是吗？我不明白。有趣的问题。没错，在使用OSX的Safari上（甚至在Chrome、Firefox上）以及在Android上的Chrome和Firefox上都可以很好地工作。当我在iOS上测试它时，我看到的是没有透明度的图像透明图像，失去了透过wal的效果。

#preview{
    width:100%;
    background-size:cover, 100px;
}