기존 전환을 유지하면서 스프라이트 이미지로 전환하는 방법

Question

현재 이미지를 저장할 스프라이트를 사용하지 않는 사이트가 있습니다. 대신 개별 이미지를 직접 참조하고 있습니다. 이제 모든 정적 이미지를 단일 스프라이트에 넣어 사이트를 최적화하고 싶습니다.

현재, 이미지를 붙이기 위해 transition: background-image 0.5s; CSS 효과를 사용하고 있습니다. 마우스가 움직일 때 멋지게 보이는 '페이딩'효과가 발생합니다. 이 페이딩 전환 효과가 발생하는 두 가지 예를 도시

JSFiddle :http://jsfiddle.net/VsVpU/

문제 I가 스프라이트를 사용하는 경우, background-image가 background-position 변경하는 것이 있으며, 이것에, 앞의 페이딩 효과의 영향을 변경 수직/수평 슬라이딩 효과.

기존 페이딩 전환 효과를 유지하면서 을 유지하면서 소스 HTML을 변경하지 않으면 어떻게 스프라이트로 전환 할 수 있습니까?

변경 사항이 많아 질 수 있으므로 HTML을 변경하고 싶지 않습니다. CSS 만 사용하면이 작업을 수행 할 수 있습니까? 또는 CSS + jQuery/JavaScript를 사용 하시겠습니까? .. 나는 가능하면 .. 너무 여기에 자바 스크립트를 방지하고 싶습니다하지만

편집 :

이 솔루션은 ... 크로스 브라우저 호환도해야

당신은 2 개 스프라이트 이미지를 만들 필요가

Answer 1

, 하나는 정상 상태이고 다른 하나는 호버 상태입니다.

특정 요소 배경의 좌표 은 두 이미지에서 동일해야합니다..

그런 상태를 가져하기 위해 정상 상태로의 전환이 이미지 URL에서 수행 아니라 좌표에