0

我将两张图像叠放在一起（一张是黑白的，另一张是彩色的）并创建了一个 CSS 过渡，其中一张图像的不透明度降低，而另一张增加。结果是悬停效果上的颜色。

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

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

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

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

我的 CSS 在下面，或者访问这个 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);
}
4

1 回答 1

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);
}
于 2013-09-18T22:06:38.937 回答