我有一个 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 混合在一起:乘法,在此之上,我将最后一张图像(透明图像)与透明背景(想象一张房间的照片,墙壁区域为透明的)。
结果正是我想要的,但是当我尝试放
#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;
}
显示没有混合。
编辑2:
我正在添加一个示例来显示和复制错误:https ://jsfiddle.net/dyqnghdo/3/