CSS background-position

Question

Niewiele tu pytanie, mam obrazu sprite, które zawierają ikony z normalny i aktywowania efektów ..

I to jest css mam do teraz ..

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

jak ty można zobaczyć, normalny stan ikon jest zawsze z pozycji tle Y = 0, więc obrazy Hover są w Y = -24px

My HTML dla ikony jest:

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

Pytanie brzmi: możliwa jest zmiana tylko pozycji Y, więc mogę przypisać pojedynczą linię CSS dla wszystkich ikon Ustawić stan zamiast linii css dla każdej ikony?

Coś jak:

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

zamiast

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

Answer 1

czuję ból!

To nie działa na wszystkich przeglądarkach.

Zasugerowano podzielenie background-position na background-position-x i background-position-y, aby móc łatwo zmienić tylko jedną oś. Niestety ludzie W3C zdecydowali, że nie jest wystarczająco przydatny, aby dodać go do standardu. Możesz przeczytać więcej na ten temat tutaj Bugzilla thread i here on w3c website

Działa to jednak w Chrome, wydaje się, że tylko Firefox nie obsługuje go z głównej przeglądarki. Ale nadal nie jest to zgodne ze standardem i może nie być, dopóki CSS 4.