Como se usa esta propiedad

[iovan]

Hola amigos, verán tengo una imagen con muchos iconos



Y quiero utilizarlos, se que se puede hacer que se muestre solo un iconito como fondo utilizando la misma imagen y jugando con las propiedades CSS.


Me hechan una mano. muchas gracias.

[kseso?]

sprites+css

[PabloFerran]

Iniciado por New

Hola amigos, verán tengo una imagen con muchos iconos



Y quiero utilizarlos, se que se puede hacer que se muestre solo un iconito como fondo utilizando la misma imagen y jugando con las propiedades CSS.


Me hechan una mano. muchas gracias.

Código:

.*CLASS* {
background: url(*IMAGE*) no-repeat;
width: **px;
height: **px;
float: left;
}
.*CLASS*:hover { background-position: **px -**px; }
.*CLASS*:active { background-position: **px -**px; }

Se define una clase con un ancho y alto determinado ( la parte de imagen que quieres ver) y se le pone como fondo una imagen con los estados de tu sprite (hover,active etc)
Despues usas background position en cada estado del sprite para qeu se vea una parte de la imagen.

[KurozakiIchigo]

http://www.cristalab.com/tips/menu-css-con-imagenes-precargadas-css-sprites-c65689l/

[iovan]

muchas gracias a todos, ya me ha quedado claro.

Un saludo.