elementos - CSS: usando sprites de imagen con pseudo clases css: antes y: después

selectores css

Question

Nunca he intentado eso antes. He creado un sprite de imagen que contiene dos iconos. Cada icono es de 26px de ancho y alto. Así que el sprite es 26x52px.

Tengo un elemento que está en un elemento div o en cualquier elemento div. Dependiendo de la clase en la que esté, quiero agregar un tope de esquina a la izquierda o la derecha.

Por lo tanto, estoy posicionando el elemento .element relativo, aplique el :before pseudoclase al img y colóquelo absoluto con una altura y un ancho de 26px, por lo que solo encaja un icono del sprite. También aplico "overflow: hidden" en Para 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 bien para la esquina izquierda donde uso el primer icono superior en el sprite. Sin embargo, ahora me pregunto cómo puedo mostrar solo el segundo icono en el sprite para "cualquier elemento."

Entonces, en realidad, la "máscara" se debe colocar a -2px, -2px, pero el sprite img interior debe comenzar a -26px para que se muestre el segundo icono.

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

Answer 1

El soporte para: antes y: después de los pseudo elementos en las etiquetas img es limitado, si es que existe en la mayoría de los navegadores.

La mejor solución sería colocar su img dentro de un div, y luego aplicar la clase al div real, en lugar del img.

Casi tienes el uso del pseudo elemento correcto. Puedes intentarlo:

.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.

izquierda:; Correcto:; y arriba :; se debe utilizar para el posicionamiento absoluto del pseudo elemento en relación con su padre (.somediv).

Colocar un borde de 1px alrededor de su pseudo-elemento lo ayudará a comprender las diferentes posiciones :)

Answer 2

No utilice content para insertar su imagen, ya que no puede modificar su posición. En su lugar, establezca el contenido en " " y agregue el sprite como imagen de fondo. Luego puede usar la propiedad de 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/