CSS background-position

Question

ít câu hỏi ở đây, tôi có một hình ảnh ma có chứa các biểu tượng với bình thường và di chuột hiệu ứng ..

Và đây là css tôi có bây giờ ..

.wi{ 
    background-image:url(images/icons/small/wi.png); 
    background-repeat:no-repeat; 
    display:block; 
    overflow:hidden; 
    height:24px; 
    width:24px; 
} 

.wi-delete{background-position:0 0;} 
.wi-edit{background-position:-24px 0;} 
.wi-fullscreen{background-position:-48px 0;} 
.wi-imageedit{background-position:-72px 0;} 
.wi-download{background-position:-96px 0;} 
.wi-tags{background-position:-130px 0;} 
.wi-windowed{background-position:-154px 0;} 

Như bạn có thể thấy, tình trạng bình thường của các biểu tượng luôn luôn là với vị trí nền Y = 0, vì vậy những hình ảnh Hover là tất cả cùng Y = -24px

html của tôi cho các biểu tượng là:

<div id="something" class="wi wi-delete"></div> 

Câu hỏi đặt ra là: chỉ có thể thay đổi vị trí Y để tôi có thể gán một dòng CSS cho tất cả các biểu tượng Trạng thái di chuột, thay vào đó có dòng css cho mọi biểu tượng?

Cái gì như:

.wi:hover{ 
background-position: auto -24px; 
} 

thay

.wi-delete:hover{background-position:0 -24px;} 
.wi-edit:hover{background-position:-24px -24px;} 
..and so on.. 

Answer 1

Tôi cảm thấy đau đớn của bạn!

Nó không hoạt động trên tất cả các trình duyệt.

Đề nghị chia background-position thành background-position-x và background-position-y để chỉ có thể dễ dàng thay đổi một trục. Đáng buồn là những người W3C đã quyết định rằng nó không đủ hữu ích để thêm nó vào tiêu chuẩn. Bạn có thể đọc thêm tại đây Bugzilla thread và here on w3c website

Tuy nhiên, nó hoạt động trên Chrome, có vẻ như chỉ Firefox không hỗ trợ nó từ trình duyệt chính. Nhưng nó vẫn không có trong tiêu chuẩn và có thể không đến CSS 4.