html - 为什么按钮不显示任何淡入淡出效果？

Question

我正在尝试编写一个按钮，在悬停时该按钮会产生缓入缓出效果。我使用了以下代码:

#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333); 
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}

#quotebutton:hover {
/* fallback image non-cover color */
   background-color: #000;
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #333, #000); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #333, #000);
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #333, #000);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
    text-decoration:none;
    color:#fff;
}

HTML 如下:

<div id="quotebutton">
<a href="">Download Now</a>
</div>

但是按钮没有显示悬停效果。可能是什么问题？

Answer 1

不幸的是，简短的回答是您不能使用 CSS3 过渡动画背景渐变。有几种方法可以使用替代技术实现相同的目标:

1. 使用 jQuery 为悬停时两个不同背景图像之间的过渡设置动画。您可以通过使用绝对定位将三个元素堆叠在一起来最轻松地完成此操作，其中底部两个是背景图像，顶部包含内容，在本例中是您的按钮文本。悬停时，淡出顶部背景图像以平滑显示底部图像。参见 this tutorial for making a background animation on hover with jQuery .

2. 将半透明渐变背景与 webkit 过渡结合使用来创建局部动画。 CSS3 过渡可以轻松地为背景颜色 CSS 属性设置动画，该属性仅通过不存在或透明的背景图像或渐变可见。参见 this example for an idea of how you might implement this .

在这两个选项中，(1) 更灵活但工作量更大并且需要配套脚本，而 (2) 灵 active 较差且跨浏览器兼容性较差。