CSS过渡白光闪存

Question

我所要做的就是用CSS实现一个更明亮的色调(使用不透明度)，并且我已经尝试了-webkit-：隐藏的技巧，但它没有成功。白色闪过悬停，这让我发疯了！

http://jsfiddle.net/eb3Lp0s0/

CSS

.button {
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    display:block;
   border-top: 1px solid #96d1f8;
   background: #0083d4;
   background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0083d4));
   background: -webkit-linear-gradient(top, #0099ff, #0083d4);
   background: -moz-linear-gradient(top, #0099ff, #0083d4);
   background: -ms-linear-gradient(top, #0099ff, #0083d4);
   background: -o-linear-gradient(top, #0099ff, #0083d4);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color:#272727;
   font-size: 18px;
   font-family: 'Century Gothic', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   text-transform:uppercase;
  opacity: 1;
    transition: all 0.3s ease 0s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;

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

   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   -webkit-backface-visibility: hidden;

HTML

<button type="button"  onclick="location.href='http://webwavebuilding.com/whatwedo.html'" class="button">Learn more</button>

Answer 1

在:hover上使用:hover，而不仅仅是background

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

http://jsfiddle.net/eb3Lp0s0/1/

通常，如果您只想专门设置background-color，不要使用速记background，使用特定的属性。

另一种修复方法是在background-color类中将梯度设置为.button：

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

http://jsfiddle.net/eb3Lp0s0/2/

或将颜色添加到组合background中。

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

http://jsfiddle.net/eb3Lp0s0/3/

我认为这表明了这里发生了什么:使用background:作为梯度重置整个background-值集，包括隐式background-color。因此，即使在调用background: -webkit-gradient()行之前就已经将其设置好了，这两行实际上正在删除(通过重置)隐式background-color，然后变成background-color: transparent;。因此闪光灯。