CSS过渡白闪问题

Question

CSS过渡白闪问题

4

我想要做的就是使用CSS实现一个从暗色调到明亮色调的过渡效果（使用opacity），我已经尝试过使用-webkit-backface-visibility:hidden的技巧，但它没有起作用。当鼠标悬停时会出现白色闪烁，这让我很烦恼！！

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>

- Max Burleigh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared Farrish · Accepted Answer

在: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，而是使用具体的属性。

另一种解决方法是在.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中：

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;。因此出现了闪烁。