Applicazione CSS al tag immagine per mostrare solo la metà inferiore

Question

Ho un tag immagine che sta visualizzando un'immagine di 18 pixel di larghezza e 36 pixel di altezza. Tuttavia, voglio solo visualizzare i 18 x 18 pixel in basso dell'immagine e non i 18 x 36 pixel completi. Come faccio ad applicare uno stile al tag per realizzare questo?

EDIT:

Grazie a tutti per il vostro aiuto! Era una combinazione di un paio di tue risposte che mi ha portato lì. Gli stili finali sono uscito con sono le seguenti -

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; 
} 

ho provato l'attributo della clip, ma non ha avuto molta fortuna con esso, e sono sotto la pistola per una scadenza così dovrò pasticciarlo più tardi. Grazie ancora!

Answer 1

Ho paura che non puoi (ma suppongo che non dovresti mai dire mai, quindi non rinunciare ancora alla speranza).

si hanno due soluzioni che coinvolgono un po 'più di lavoro:

• Posizionare l'immagine all'interno di un elemento 18x18 che è impostato su overflow:hidden

• Girare l'elemento di immagine in un elemento 18x18 che utilizza background-image

Answer 2

È possibile applicare quell'immagine sullo sfondo di un <div> e impostare il altezza di quel div a 18 pixel e la posizione di sfondo.

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