Question

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

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;。因此闪光灯。

CSS Transition White Flash

1 个答案: