在不透明度上使用CSS转换时淡出一个图像而淡出另一个图像是'；不顺利吗？

我把两个图像放在另一个上面（一个是黑白的，另一个是彩色的），并创建了一个CSS过渡，其中一个图像的不透明度降低，而另一个图像的不透明度增加。其结果是一场灾难

但我有一个问题：在过渡过程中的某个时刻，您可以稍微看穿图像，这表明不透明度的过渡不是线性的，即使“过渡时间函数”属性设置为线性

如果涉及到某种二次宽松，我会理解为什么会发生这种情况，但不应该发生

（我使用纯CSS实现这一点的原因是因为我还没有完全处理JQuery）

关于如何更好地实现此功能，有什么想法吗

我的CSS在下面，或者

---

问题不在于转换不是线性的，而在于如果你把两个非不透明的图像放在一起，背景总是部分可见

例如，在中间的过渡肉，两个图像是不透明的50%。底部图像覆盖了50%的背景，顶部图像覆盖了剩余50%背景的50%，但仍有25%的背景发光

只需将底部图像保持不透明，并让顶部图像在过渡中接管：

即，移除底部图像上的不透明度过渡：

#container:hover #dbw { 
  transform: scale(1.1);
  -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
}

#container:hover #dbw { 
  transform: scale(1.1);
  -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
}