CSS: wyświetlanie jednej konkretnej ikony z pliku obrazu

Jak ustawić właściwość CSS background-image, aby załadować jedną konkretną ikonę z większego obrazu?CSS: wyświetlanie jednej konkretnej ikony z pliku obrazu

Na przykład jQuery UI motywuje widżet okna dialogowego przy użyciu następującego pliku obrazu PNG: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, który koduje w sobie garść ikon. Następnie, w wersji demo w http://docs.jquery.com/UI/Dialog, uchwyt w prawym dolnym rogu ładuje ostatnią ikonę z pliku PNG.

Korzystając z Firebug, widzę kilka właściwości CSS, takich jak ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se, które odnoszą się do url(ui-icons.xx.png), ale nic nie wskazuje na wybór konkretnej ikony.

Źródło

2009-09-30 Jerry Chong

To w rzeczywistości technika ikonki CSS.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

użycie

background-position

nieruchomość

Jeśli obraz tła został określony, ta właściwość określa jego początkową pozycję. Jeśli podana jest tylko jedna wartość , druga wartość zostanie przyjęta jako jako "środek". Jeśli co najmniej jedna wartość nie jest słowem kluczowym, wówczas pierwsza wartość reprezentuje pozycję poziomą, a , druga reprezentuje pozycję pionową . Wartości ujemne i są dozwolone.

body { background: url("banner.jpeg") right top } /* 100% 0% */ 
body { background: url("banner.jpeg") top center } /* 50% 0% */ 
body { background: url("banner.jpeg") center }  /* 50% 50% */ 
body { background: url("banner.jpeg") bottom }  /* 50% 100% */

Tłem właściwość CSS jest skrótowym właściwość ustawiania własność indywidualną tła wartości w jednym miejscu w arkuszu stylów. Tło może być użyte do ustawienia wartości dla jednego lub więcej spośród: tła-koloru, tła-obrazu, tła-położenia, tła-powtórzenia, tła-załącznika.

.PosBG { 
    background-image: url("logo.png"); 
    background-attachment: fixed; 
    background-position: 100% 100%; 
    background-repeat: no-repeat; 
}

Źródło

2009-09-30 05:09:45 rahul

Coś jak następuje:

background-image: url('yourimage.png'); 
background-repeat: no-repeat; 
background-position: 25px 0px;

zobaczyć http://www.w3schools.com/css/pr_background-position.asp więcej na tle pozycji

Źródło

2009-09-30 05:10:05

Dzięki za udział –

Powyższy link jest teraz uszkodzony. Skorzystaj z tego: http://www.w3schools.com/css/css_image_sprites.asp – Javide

@javid Właśnie przeczytałem twój użyteczny użyteczny link, ale w tym, że oni mówią, że technologia sprite jest przydatna i wyjaśnij również, że zgadzam się z w3school. ale co z tym stwierdzeniem "Strona internetowa z wieloma obrazami może długo czekać na załadowanie i generuje wiele żądań serwera." do oddzielania obrazów od tego, jak musisz wywoływać obraz wiele razy za pomocą właściwości url. – user2826111

Under the covers...

Elementy kotwiące są stałym rozmiarze, a tło jest ustawiony na obraz zawierający wszystkie ikony, ale właściwość position-tło to specifi ed, aby przesunąć obraz tła tak, aby wyświetlana była tylko żądana ikona z obrazu.

Spójrz na A List Apart's explaination of the technique.

Źródło

2009-09-30 05:16:03 MyItchyChin

Dzięki temu bardzo mi pomogło ...... – User

CSS: wyświetlanie jednej konkretnej ikony z pliku obrazu

Odpowiedz

Powiązane problemy