html - 透明背景在图像调整大小时变为白色
<p><p>我有一个 HTML 页面，我需要在其中渲染 3 个图像，一个在彼此的顶部。</p>
<pre><code><div id="preview">
<img src="transparent-image">
</div>
</code></pre>
<p>使用以下 CSS</p>
<pre><code>#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
</code></pre>
<p>第一个 2 个图像使用 CSS 属性 background-blend-mode: multiply 混合在一起，在此之上，我将最后一张图像(透明图像)与透明背景(想象一张房间的照片，与墙区域是透明的)。</p>
<p>结果正是我想要的，但是当我尝试放入时</p>
<pre><code>#preview{
width:100%
}
</code></pre>
<p>使其响应；它完美无缺，但在 ios 上失去了透明度。
我在 Chrome、Safari 和 Firefox (iOS) 上测试了这种行为。在 OSX、Android、Windows 上的 Chrome、Safari、Firefox 上完全没有问题。</p>
<p>我有什么遗漏吗？感谢您的宝贵时间。</p>
<p><strong>编辑:</strong></p>
<p>layer0-image 和 transparent-image 是同一个图像，layer0-image 没有透明度，并与 layer1-image 相乘，然后在这个混合图像的顶部放置 transparent-image。</p>
<p>我尝试将透明图像更改为另一个，问题似乎是 layer0-image 和 layer1-image 之间的混合，但由于 layer0-image 和 transparent-image 是相同的，起初我认为存在透明度问题。</p>
<p>透明度是存在的，但 div #preview 放置时的高度为 0px</p>
<pre><code>#preview{
width:100%;
height:auto;
}
</code></pre>
<p>显示没有混合。</p>
<p><strong>EDIT2</strong>:</p>
<p>我正在添加一个示例来显示和复制错误:<a href="https://jsfiddle.net/dyqnghdo/3/" rel="noreferrer noopener nofollow">https://jsfiddle.net/dyqnghdo/3/</a> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>好的，我终于找到了问题所在。有:</p>
<pre><code>#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
</code></pre>
<p>然后设置:</p>
<pre><code>#preview{
width:100%;
}
</code></pre>
<p>导致错误。为了修复它，我尝试设置:</p>
<pre><code>#preview{
width:100%;
background-size:cover, 100px;
}
</code></pre>
<p>即使我不清楚它为什么会发生，问题也消失了。</p></p>
<p style="font-size: 20px;">关于html - 透明背景在图像调整大小时变为白色，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/42767279/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/42767279/
</a>
</p>
页:
[1]