Question

我有一个HTML页面，我需要渲染3个图像，一个在另一个上面。

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

使用以下CSS

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

使用CSS属性background-blend-mode将第一个2个图像混合在一起：乘以此，我将最后一个图像（透明图像）与透明背景放在一起（想象一下房间的照片，墙区是透明的。）

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

#preview{
    width:100%
}

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

我有什么遗失的东西吗？谢谢你的时间。

修改

layer0-image和transparent-image是相同的图像，layer0-image没有透明度，并且与layer1-image相乘然后在这个混合图像的顶部我放置了透明图像。

我试图用另一个改变透明图像，问题似乎是layer0-image和layer1-image之间的混合，但由于layer0-image和transparent-image是相同的事实，起初我以为存在透明度问题。

透明度在那里，但div #preview在放入

时的高度为0px

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

不显示混合。

EDIT2 ：

我添加了一个示例来显示和复制错误：https://jsfiddle.net/dyqnghdo/3/

Answer 1

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

#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;
}

即使我不清楚为什么会这样，问题仍然存在。

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

1 个答案: