Aplicación de CSS a la etiqueta de imagen para mostrar solo la mitad inferior

Question

Tengo una etiqueta de imagen que muestra una imagen de 18 píxeles de ancho y 36 píxeles de alto. Sin embargo, solo quiero mostrar los 18 x 18 píxeles inferiores de la imagen, y no los 18 x 36 píxeles completos. ¿Cómo hago para aplicar un estilo a la etiqueta para lograr esto?

EDIT:

Gracias todos por su ayuda! Fue una combinación de un par de tus respuestas las que me llevaron allí. Los estilos finales que salieron con son los siguientes -

div.minus 
{ 
    background-image: url('Images/PlusMinus.gif'); 
    background-repeat: no-repeat; 
    background-position: bottom; 
    margin : 0px; 
    padding : 0px; 
    height: 18px; 
    width : 18px; 
    overflow : hidden; 
} 

div.plus 
{ 
    background-image: url('Images/PlusMinus.gif'); 
    background-repeat: no-repeat; 
    background-position: top; 
    margin : 0px; 
    padding : 0px; 
    height: 18px; 
    width : 18px; 
    overflow : hidden; 
} 

probé el atributo clip, pero no tenía mucha suerte con él, y estoy bajo presión por un plazo por lo que tendré que meterse con eso más adelante. ¡Gracias de nuevo!

Answer 1

Me temo que no puedes (pero supongo que nunca debes decir nunca, así que no pierdas la esperanza).

usted tiene dos soluciones que implican un poco más de trabajo:

• Coloque la imagen dentro de un elemento de 18x18 que se establece en overflow:hidden

• Girar el elemento de imagen en un elemento de 18x18 que utiliza background-image

Answer 2

Puede aplicar esa imagen al fondo de un <div> y configurar el altura de ese div a 18 píxeles y la posición de fondo.

.cutoff { 
    background: url('image.jpg'); 
    height: 18px; 
    background-position: bottom; 
}