Firefox에서 배경 이미지 전환이 작동하지 않습니다.

CSS로 로고 전환을 만들려고하지만 크롬에서만 작동하며 FF 또는 IE에서는 작동하지 않습니다. 어떻게해야합니까?Firefox에서 배경 이미지 전환이 작동하지 않습니다.

MY CSS

.logo { 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    background-image: url(../images/text.enter.png); 
    border-style: none; 
    height: 70px; 
    left: 50%; 
    margin-left: -138.5px; 
    margin-top: -35px; 
    position: absolute; 
    top: 50%; 
    width: 277px; 
} 

.logo:hover { background-image: url(../images/logo.png); }

출처

2014-07-08 Daniel Eugen

Firefox에서 알려진 문제라고 생각합니다. 배경 이미지를 변경하는 대신 이미지의 스프라이트를 만들어 배경 위치를 변경하십시오. –

@KK 고맙겠습니다. 그러나 문제가 해결되었지만 불투명도가있는 변경을 원한다면 어떻게해야합니까? BG를 움직이는 것이 아니라? –

@ Daniel eugen : 호버 CSS 규칙에서 배경 위치와 함께 불투명도를 추가 할 수도 있습니다. –

데모 : http://jsfiddle.net/lotusgodkk/GCu2D/242/

CSS :

* { 
    margin: 0; 
    padding: 0; 
} 
#nav li:hover { 
    -webkit-animation: NAME-YOUR-ANIMATION 500ms; 
    /* Safari 4+ */ 
    -moz-animation: NAME-YOUR-ANIMATION 500ms; 
    /* Fx 5+ */ 
    -o-animation: NAME-YOUR-ANIMATION 500ms; 
    /* Opera 12+ */ 
    animation: NAME-YOUR-ANIMATION 500ms; 
    /* IE 10+, Fx 29+ */ 
} 
#nav { 
    width: 400px; 
    margin: 40px auto; 
} 
#nav li { 
    list-style-type:none; 
    font-size:2em; 
} 
#nav li a { 
    background-image:url('http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif'); 
    background-repeat:no-repeat; 
    padding: 0 0 0 90px; 
    display: block; 
    height: 72px; 
} 
#nav li a.item1 { 
    background-position:0px 0px; 
} 
#nav li a:hover.item1 { 
    background-position:0px -72px; 
} 
#nav li a.item2 { 
    background-position:0px -143px; 
} 
#nav li a:hover.item2 { 
    background-position:0px -215px; 
} 
#nav li a.item3 { 
    background-position:0px -287px; 
} 
#nav li a:hover.item3 { 
    background-position:0px -359px; 
} 
#nav li a.item4 { 
    background-position:0px -431px; 
} 
#nav li a:hover.item4 { 
    background-position:0px -503px; 
} 
#nav li a.item5 { 
    background-position:0px -575px; 
} 
#nav li a:hover.item5 { 
    background-position:0px -647px; 
} 
@-webkit-keyframes NAME-YOUR-ANIMATION { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@-moz-keyframes NAME-YOUR-ANIMATION { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@-o-keyframes NAME-YOUR-ANIMATION { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
@keyframes NAME-YOUR-ANIMATION { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity: 1; 
    } 
}

HTML : 나는 애니메이션 키 프레임을 사용

<ul id="nav"> 
    <li><a class="item1" href="#" title="Some Link 1">Item 1</a> 

    </li> 
    <li><a class="item2" href="#" title="Some Link 2">Item 2</a> 

    </li> 
    <li><a class="item3" href="#" title="Some Link 3">Item 3</a> 

    </li> 
    <li><a class="item4" href="#" title="Some Link 4">Item 4</a> 

    </li> 
    <li><a class="item5" href="#" title="Some Link 5">Item 5</a> 

    </li> 
</ul>

. 여기에 대한 자세한 내용은 여기를 참조하십시오. http://css-tricks.com/snippets/css/keyframe-animation-syntax/

이 예는 사용자의 필요에 따라 완벽하지는 않지만 원하는 결과를 얻는 데 도움이 될 수 있습니다.

출처

2014-07-09 07:24:19

Firefox에서 배경 이미지 전환이 작동하지 않습니다.

답변

관련 문제