在不透明度上使用 CSS 过渡时淡化一个图像而不平滑？答案

【问题标题】：Fading one image out while another in using CSS transitions on opacity isn't smooth?在不透明度上使用 CSS 过渡时淡化一个图像而不平滑？
【发布时间】：2013-09-23 20:26:18
【问题描述】：

我将两张图片叠放在一起（一张是黑白的，另一张是彩色的）并创建了一个 CSS 过渡，其中一张图片的不透明度降低，而另一张图片的不透明度增加。结果是color on hover effect。

不过我遇到了一个问题：在过渡期间的某个时刻，您可以稍微透过图像看到一点，这表明即使“transition-timing-function”属性设置为，不透明度的过渡也不是线性的线性的。

如果涉及某种二次缓动，我会理解为什么会发生这种情况，但不应该这样吗？

（我使用纯 CSS 来解决这个问题的原因是因为我还没有完全处理 JQuery）

关于如何更好地实现此功能的任何想法？

我的 CSS 在下面，或visit this JSFiddle。

#container { width: 210px; height: 150px; display:block; border: 4px solid #ccc; position:relative; overflow:hidden; margin: 10px 0 0 10px;}

.image { width: 210px; height: 150px; display:block; position:absolute; left: 0px; top:0px; }

#dbw { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi42.tinypic.com/x0y2ky.jpg"); 
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

#dco { 
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    background: url("http://oi40.tinypic.com/28gwcrb.jpg"); 
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

#container:hover #dbw { 
    filter: alpha(opacity=0); 
    opacity: 0; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

#container:hover #dco { 
    filter: alpha(opacity=100); 
    opacity: 1; 
    transform: scale(1.1);
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1);
}

【问题讨论】：

标签： css css-transitions opacity

【解决方案1】：

问题不在于过渡不是线性的，而只是如果将两个不透明的图像放在一起，背景总是部分可见。

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

只保留底部图像不透明，让顶部图像在过渡中接管：

http://jsfiddle.net/qvcRf/4/

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

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

【讨论】：