CSS 过渡白色闪光

Question

我想要完成的只是使用 CSS 过渡到更亮的色调（使用不透明度），我已经尝试了 -webkit-backface-visibility:hidden 技巧，但它没有用。在悬停时闪烁白色，这让我发疯了！！

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

使用background-color上: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;. 因此闪光灯。