CSS: używanie ikonek obrazu z pseudo klasami css: przed i: po

Question

Nigdy wcześniej tego nie próbowałem. Stworzyłem sprite obrazu, który zawiera dwie ikony. Każda ikona ma szerokość i szerokość 26 pikseli. Więc sprite ma 26x52px.

Mam element, który jest w div.something lub div.nething. W zależności od klasy, w której chcę umieścić narożnik lewy lub prawy.

Dlatego pozycjonuję relację .element, stosuję pseudoklasę :before do img i ustawię ją absolutnie z wysokością i szerokością 26px, więc pasuje tylko jedna ikona ikonki. Stosuję również "przepełnienie: ukryte ", aby ukryć drugą ikonę na ikonce.

.element { 
    position:relative; 
} 

.element:before{ 
    content: url("../images/sprite.png"); 
    position: absolute; 
    height:26px; 
    width:26px; 
    overflow:hidden; 
} 

.something .element:before { 
    top: -2px; 
    left: -2px; 
} 

anything .element:before { 
    top: -28px; 
    right: -2px; 
} 

Działa to dobrze w lewym rogu, gdzie używam pierwszej górnej ikony w ikonce. Jednak teraz zastanawiam się, w jaki sposób mogę pokazać tylko drugą ikonę w ikonce dla "czegoś .elementu".

Tak więc "maska" powinna być ustawiona na -2px, -2px, ale obraz wewnątrz sprajtu powinien zaczynać się od -26px, aby wyświetlić drugą ikonę.

Czy jest to możliwe dzięki css tak jak teraz?

Answer 1

Nie należy używać content do wstawiania obrazu, ponieważ nie można zmienić jego pozycji. Zamiast tego ustaw zawartość na " " i dodaj ikonkę jako obraz tła. Następnie możesz użyć właściwości background-position, aby przesunąć ikonkę do właściwej pozycji. W przeciwnym razie twój przykład powinien działać dobrze.

Demo pracy:

http://jsfiddle.net/RvRxY/1/

Answer 2

Wsparcie: before i: after elementami pseudo IMG tagów jest ograniczona, jeśli w ogóle istniały w większości przeglądarek.

Najlepszym rozwiązaniem byłoby umieszczenie pliku IMG wewnątrz elementu div, a następnie przypisanie klasy do rzeczywistego elementu div zamiast do pliku img.

Prawie masz zastosowanie do poprawnego pseudo elementu. Możesz spróbować:

.somediv { position:relative;} 

.somediv:before { 
    position: absolute; 
    content: ''; 
    height: 26px; 
    width: 26px; 
    top: 0; 
} 

.somediv.foo1:before { 
    background: url("../images/sprite.png") no-repeat -2px -2px; 
    left: 0; 
} 

.somediv.foo2:before { 
    background: url("../images/sprite.png") no-repeat -2px -28px; 
    right: 0; 
} 

Użyj tła :; własność, a nie treść :; Właściwość, dzięki której możesz ustawić ikonkę wewnątrz: before pseudo element.

po lewej :; dobrze:; i góra :; powinny być używane do bezwzględnego pozycjonowania pseudo elementu względem jego rodzica (.somediv).

Umieszczenie obramowanie 1px wokół elementu pseudo pomoże Ci zrozumieć inną pozycję :)