OStack程序员社区-中国程序员成长平台

标题: html - 透明背景在图像调整大小时变为白色 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:14
标题: html - 透明背景在图像调整大小时变为白色

我有一个 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;
}

第一个 2 个图像使用 CSS 属性 background-blend-mode: multiply 混合在一起，在此之上，我将最后一张图像(透明图像)与透明背景(想象一张房间的照片，与墙区域是透明的)。

结果正是我想要的，但是当我尝试放入时

#preview{
    width:100%
}

使其响应；它完美无缺，但在 ios 上失去了透明度。 我在 Chrome、Safari 和 Firefox (iOS) 上测试了这种行为。在 OSX、Android、Windows 上的 Chrome、Safari、Firefox 上完全没有问题。

我有什么遗漏吗？感谢您的宝贵时间。

编辑:

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

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

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

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

显示没有混合。

EDIT2:

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

---

Best Answer-推荐答案

好的，我终于找到了问题所在。有:

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

即使我不清楚它为什么会发生，问题也消失了。

关于html - 透明背景在图像调整大小时变为白色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42767279/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4