Áp dụng CSS cho thẻ hình ảnh để chỉ hiển thị nửa dưới

Question

Tôi có thẻ hình ảnh hiển thị hình ảnh có chiều rộng 18 pixel và chiều cao 36 pixel. Tuy nhiên, tôi chỉ muốn hiển thị 18 x 18 pixel dưới cùng của hình ảnh chứ không phải toàn bộ 18 x 36 pixel. Làm cách nào để tôi áp dụng kiểu cho thẻ để thực hiện việc này?

EDIT:

Cảm ơn tất cả sự giúp đỡ của bạn! Đó là một sự kết hợp của một vài câu trả lời của bạn đã đưa tôi đến đó. Các phong cách cuối cùng mà tôi đưa ra là như sau -

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

Tôi đã thử thuộc tính clip nhưng không có nhiều may mắn, và tôi đang ở dưới thời hạn chót vì vậy tôi sẽ phải gây rối với nó sau này. Cảm ơn một lần nữa!

Answer 1

Tôi sợ bạn không thể (nhưng tôi đoán bạn không bao giờ nên nói không bao giờ, vì vậy đừng từ bỏ hy vọng).

Bạn có hai giải pháp có liên quan đến một chút nhiều việc:

• Đặt hình ảnh bên trong một yếu tố 18x18 đó là thiết lập để overflow:hidden

• Rẽ các yếu tố hình ảnh vào một yếu tố 18x18 sử dụng background-image

Answer 2

Bạn có thể áp dụng hình ảnh đó làm nền của <div> và đặt chiều cao của div đó đến 18 pixel và vị trí nền.

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