css - CSS中的背景淡入淡出 - 旧浏览器的后备

Question

我有以下导航悬停类，它只是在悬停时添加背景图像..

 nav a:hover, nav a:focus, nav a:active {
     background:url(../images/goldNavBG.png) repeat-x;
  }

我想添加一个简单的css3淡入效果 - 但我担心旧浏览器的回退，因为它需要支持 ie7 +，是否可以同时满足两者 - 所以它只是显示旧版本的 bg 而不会破坏什么！？

干杯

Answer 1

尝试这个：

nav a{
    /* your other styles */
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

nav a:hover, nav a:focus, nav a:active {
   background:url(../images/goldNavBG.png) repeat-x;
}

在非 CSS3 兼容的浏览器上，背景只会被替换，没有过渡。

这是一个演示：http: //jsfiddle.net/Vq34s/1/