0

現在スプライトを使用して画像を保存していないサイトがあります。代わりに、個々の画像を直接参照しています。サイトを最適化するために、すべての静止画像を 1 つのスプライトに配置したいと考えています。

現在、transition: background-image 0.5s;ホバー画像に CSS 効果を使用しています。これにより、マウスがホバーしたときに見栄えの良い「フェード」効果が得られます。

このフェージング遷移効果が発生する 2 つの例を示す JSFiddle: http://jsfiddle.net/VsVpU/

問題は、スプライトを使用する場合、background-imageに変更する必要がbackground-positionあり、これにより、効果が以前のフェード効果から垂直/水平のスライド効果に変更されることです。

ソース HTML を変更せずに、既存のフェード遷移効果を維持しながらスプライトに切り替えるにはどうすればよいですか?

HTML を変更したくないのは、多くの変更が発生するためです。これは CSS のみを使用して実現できますか? それとも CSS + jQuery/JavaScript を使用していますか? ..ここでもJavaScriptは避けたいところですが、できれば..

編集：

ソリューションはクロスブラウザ互換性もある必要があります..

4

1 に答える 1

0

通常状態用とホバー状態用の 2 つのスプライト イメージを作成する必要があります。

特定の要素の背景の座標は、両方の画像で同じでなければなりません。

次に、通常の状態からホバー状態への移行は、画像の URL で行われますが、座標では行われません。

于 2013-09-27T12:35:21.363 に答える