CSS背景过渡 - 渐变

Question

CSS背景过渡 - 渐变

3

我总是想不出为什么我的 CSS 中的过渡属性不起作用。下面是代码：

#header #menu-top-nav ul li a {
    -webkit-transition: background-color 10s;
    -moz-transition: background-color 10s;
    -ms-transition: background-color 10s;
    -o-transition: background-color 10s;
    transition: background-color 10s;
}
#header #menu-top-nav ul li a:hover {
    background: #dddddd; /* Old browsers */
    background: -moz-linear-gradient(top,  #dddddd 0%, #d3d3d3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #dddddd 0%,#d3d3d3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}

标签在悬停之前技术上是透明的（尽管它所包含的

具有背景渐变）。但即使我为

标签分配了背景颜色或渐变，转换仍然不起作用。我已经尝试将过渡代码放入样式中；我已经尝试更改变量为和，但都没有成功。

我的CSS中还有很多其他样式，但我一直在Chrome中进行调试，找不到任何冲突的罪魁祸首。我应该提到，转换属性在任何浏览器中都不起作用。

有人能帮我解决这个看起来简单的问题吗？

- Timothy D

3

你应该查看这个答案：https://dev59.com/o2w15IYBdhLWcg3wi8Zv#6542623 - Simon Arnold

可能是重复的问题：如何在渐变背景上使用CSS3过渡效果。 - K-ballo

1个回答

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

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

- Sven Bieder · Accepted Answer

渐变是一种背景图像而不是背景颜色。因此，对背景颜色的过渡不会对渐变产生影响。

到目前为止，不支持背景图像的过渡。