CSS: utilizando sprites de imagen con css pseudoclases: antes y después de

Question

Nunca lo había intentado antes. Creé un sprite de imagen que contiene dos iconos. Cada ícono tiene 26px de ancho y alto. Entonces el sprite es 26x52px.

Tengo un elemento que está en un div.something o en un div.anything. Dependiendo de la clase en la que se encuentre, quiero agregar una tapa de esquina hacia la izquierda o hacia la derecha.

Por lo tanto, estoy posicionando el elemento relativo, aplicando la pseudoclass :before al img y colocándolo absoluto con un alto y ancho de 26px para que solo un icono del sprite encaje. También aplique "overflow: oculto "con el fin de ocultar el segundo icono en el sprite.

.element { 
    position:relative; 
} 

.element:before{ 
    content: url("../images/sprite.png"); 
    position: absolute; 
    height:26px; 
    width:26px; 
    overflow:hidden; 
} 

.something .element:before { 
    top: -2px; 
    left: -2px; 
} 

anything .element:before { 
    top: -28px; 
    right: -2px; 
} 

Esto funciona muy bien para la esquina izquierda donde utilizo el primer icono en la parte superior del sprite. Sin embargo, ahora me pregunto cómo puedo mostrar solo el segundo ícono en el sprite para el "elemento cualquiera".

Así que, en realidad, la "máscara" debe colocarse en -2px, -2px, pero la imagen interna del sprite debe comenzar en -26px, por lo que se muestra el segundo icono.

¿Es esto posible con CSS de la forma en que lo estoy haciendo ahora mismo?

Answer 1

No utilice content para insertar su imagen, ya que no puede modificar su posición. En su lugar, configure el contenido en " " y agregue el sprite como imagen de fondo. A continuación, puede usar la propiedad background-position para mover el sprite a la posición correcta. De lo contrario, su ejemplo debería estar funcionando bien.

Una demostración de trabajo:

http://jsfiddle.net/RvRxY/1/

Answer 2

Soporte para: before y: after pseudo elementos en las etiquetas IMG es limitada, e incluso nulo en la mayoría de los navegadores.

La mejor solución sería colocar su img dentro de un div, y luego hacer que la clase se aplique a la div real, en lugar de la img.

Casi tiene el uso para el pseudo elemento correcto. Puedes probar esto:

.somediv { position:relative;} 

.somediv:before { 
    position: absolute; 
    content: ''; 
    height: 26px; 
    width: 26px; 
    top: 0; 
} 

.somediv.foo1:before { 
    background: url("../images/sprite.png") no-repeat -2px -2px; 
    left: 0; 
} 

.somediv.foo2:before { 
    background: url("../images/sprite.png") no-repeat -2px -28px; 
    right: 0; 
} 

Usa el fondo :; propiedad en lugar del contenido :; propiedad para que pueda colocar el sprite dentro del: antes del pseudo elemento.

left :; derecho:; y arriba :; debe usarse para la posición absoluta del pseudo elemento relativo a su elemento primario (.somediv).

La colocación de un borde de 1 píxel alrededor de su elemento seudo le ayudará a entender el posicionamiento diferente :)