Html 过渡白光闪光

我所要做的就是使用CSS转换成更亮的色调（使用不透明度），我已经尝试了-webkit backface visibility:hidden技巧，但没有成功。在悬停上闪烁白色，让我快发疯了

CSS

HTML

了解更多信息
在
上使用
背景色
：悬停
，而不仅仅是
背景
：

.button:hover {
    border-top-color: #28597a;
    background-color: #28597a;  /* <<< Here */
    color: #ccc;
    opacity: 0.75;
    -webkit-backface-visibility: hidden;
}

background: #0083d4 -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4));
background: #0083d4 -webkit-linear-gradient(top, #0099ff, #0083d4);


或将颜色添加到组合的
背景中
：

.button:hover {
    border-top-color: #28597a;
    background-color: #28597a;  /* <<< Here */
    color: #ccc;
    opacity: 0.75;
    -webkit-backface-visibility: hidden;
}

background: #0083d4 -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4));
background: #0083d4 -webkit-linear-gradient(top, #0099ff, #0083d4);


我认为这表明了这里发生了什么：对渐变使用
background:
重置整个
background-
值集，包括隐式
背景颜色。因此，即使您在调用
背景：-webkit-gradient（）
行之前已将其设置正确，但这两行实际上正在（通过重置）删除隐式
背景色，该颜色随后变为
背景色：透明。因此出现了闪光。
这真的很奇怪！我想知道为什么会有不同，但确实如此。我认为这与转换有关，因为之前的状态是从更具体的属性转换而来的，而闪光灯是从设置背景颜色之前正在转换的状态转换而来的。这只是一个猜测，如果你去掉梯度，闪光就会消失。因此，要么是渐变和悬停过渡的bug，要么就像我上面说的，有一个短暂的时刻，过渡在渐变上工作，它的背景是透明的（这可能是bug）。后者似乎是可能的，如果你在身体上设置背景颜色，它就是通过显示的。嗯。。。我甚至都没想到，伙计们！我得继续读下去，这样我才能知道像这样的小细节。这对Chrome非常有用！虽然我仍然在IE中遇到了这个问题，但这确实非常有帮助！
background: #0083d4 -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4));
background: #0083d4 -webkit-linear-gradient(top, #0099ff, #0083d4);