Question

HTML：

<a class="navbar-brand page-scroll" href="#intro"></a>

CSS：

.navbar-custom .nav li a.navbar-brand {
    width: 70px;
    height: 62px;
    background: url(myimg.png) no-repeat;
    background-size: 70px 62px;
    display: block;
    position: relative;
    text-indent: -9999px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
}
.navbar-custom .nav li a.navbar-brand:hover {
    background: url(myimghover.png) no-repeat;
}

悬停效果在每个浏览器中都能正常运行，但转换效果仅适用于Google Chrome，我无法解释原因。我已经尝试过使用精灵图像和伪元素悬停，但我的图像有一个透明的背景，因此，在悬停时，＆＃34;底部＆＃34;图像仍然部分可见。有什么想法吗？

提前谢谢你。问候，学家

Answer 1

尝试

-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;

Answer 2

您无法为背景图像制作动画。 https://www.w3.org/TR/css3-transitions/#animatable-properties

CSS background-image淡入淡出过渡仅适用于Chrome

2 个答案: