html - 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

在 :hover 上使用 background-color，而不仅仅是 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，使用特定的属性.

另一种解决方法是在 .button 类中将渐变设置为 background-color:

.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: #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: 作为渐变 resets 整个 background- 值集，包括隐式 background-color。因此，即使您在调用 background: -webkit-gradient() 行之前已经正确设置了它，这两行实际上是删除(通过重置)隐式 background-color，然后变为 background-color: transparent;。因此闪光灯。