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/