css - 我正在尝试解决 CSS 转换的棘手问题。任何人?

标签 css background css-transitions

我尝试添加 transition:background 1s;但菜单背景图像由于某种原因没有转换。我在那里做错了什么?

#menu{
    padding-top:18px;
    transition:background 1s;
    -moz-transition:background 1s;
}
#menu > li{
    float:left;
    padding-right:5px
}
#menu .last{
    padding-right:0;
}
#menu > li > a{
    width:188px;
    display:block;
    font-size:17px;
    color:#000;
    background:#fff;
    text-transform:uppercase;
    font-weight:400;
    background: url('../images/IMAGE_A.jpg');;
    height:70px;
    line-height:64px;
    border-top:1px solid #555;
    text-align:center;
    border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
}
#menu > li > a:hover,#menu > .active > a{
    background:#fff;
    background: url('../images/IMAGE_B.jpg');;
    background-repeat:no-repeat;
    border-color:#7DB112;
}
#menu > li > a span{
    display:block;
    position:relative;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px
}

最佳答案

过渡尚不支持背景。图像转换计划用于 CSS4。现在你只能转换所有谨慎的子属性,如背景颜色、背景大小、背景位置。

关于css - 我正在尝试解决 CSS 转换的棘手问题。任何人?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11705132/

相关文章:

html - 用 dashoffset 控制的 SVG 圆形动画

css - 有没有办法覆盖 HTML5 表单验证消息的默认 CSS

html - 如何使用 Bootstrap 3 阻止按钮保持压抑状态

javascript - 带有 transitionend 的动画队列

iphone - UINavigationBar 的 drawRect 在 iOS 5.0 中没有被调用

javascript - “跳转”到 translateY 值然后动画回到 0

html - CSS Flexbox 中的 chalice 式单页应用程序 UI - 滚动面板在 Firefox 中不起作用

css - 如何使用 Wordpress 主题和 CSS 修复可点击背景

android - 如何更新服务类中更新的textview文本

javascript - 过渡不适用于元素