Question

我正在创建一个小型商业页面。我有一个为导航按钮创建的背景图像。我希望它们在悬停在图像上时具有过渡效果。它适用于Chrome，但我无法弄清楚为什么我的代码无法在Firefox或Internet Explorer中运行。

.nav li a.active {
    background-image: url('../images/02amainhover.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: center center;
    width: 245px;
    height: 74px;
    left: 72px;
    top: 432px;
    position: fixed;
    transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
}
.nav li a.active:hover {
    background-image: url('../images/03amainhover.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: center center;
    width: 245px;
    height: 74px;
    left: 72px;
    top: 432px;
    position: fixed;
    transition: all .8s ease-in;
    -moz-transition: all .8s ease-in;
}

Answer 1

一些事情。首先，你有太多重复的代码。网站假设相同的代码，直到你告诉它改变它，所以复制所有这些样式是没有意义的。您只需要使用要转换的内容更新它。话虽这么说，你不能转换背景图像。请参阅此列表以了解转换样式：https://www.w3.org/TR/css3-transitions/#animation-of-property-types-

Answer 2

您可以制作两个位置图像：绝对和不同的z索引。顶部的图像可以从1到0进行不透明度转换。它适用于所有浏览器。

Answer 3

@Chris Stanley指出你无法转换背景图片。

您有很多选择，具体取决于转换的确切含义。我还没有看到这些图片。

您可以使用filters
您可以在单个图像文件（网格，顶部/底部等）中组合多个图像，然后使用背景定位（即时）从一个图像“移动”到另一个图像文件。您可以将其与其他过渡或过滤器结合使用以提供其他效果。这是一个非常古老的技巧，你可以通过添加过渡和过滤器来进行新的改动。

编辑（看到图像后）：您的新代码可能如下所示：

.nav li a.active {
    background-image: url('../images/02amainhover.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: center center;
    width: 245px;
    height: 74px;
    left: 72px;
    top: 432px;
    position: fixed;
    transition: all 0.8s ease-out;

    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5);

}

.nav li a.active:hover {

    filter: invert(100%);
    transition: all 0.8s ease-in;
}

（我认为你不再需要-moz-transition。）

CSS3中的转换无法在Firefox或Internet Explorer中运行

3 个答案: