CSS: una tecnica alternativa alle sprite per il rollover di immagini

Esiste una tecnica alternativa alle sprite CSS per gestire il rollover con immagini di sfondo differenti.

Questa tecnica sfrutta le immagini di sfondo multiple CSS3 e la proprietà background-position:

#button {
	background-image: url(icon1.png), url(icon2.png);
	background-repeat: no-repeat;
	background-position: 50% 50%, -100% -100%;
}

#button:hover {
	background-position: -100% -100%, 50% 50%;	
}

Come si può notare, la proprietà background-position viene usata per mostrare o nascondere l'immagine che ci interessa.