Zdobądź ikonę z jednego obrazu png

Widziałem to tak wiele razy do teraz, ale nigdy nie użyłem siebie. Może ktoś wyjaśnić, w jaki sposób można uzyskać konkretny obraz ikona z tym jednym PNG, na przykład ikony i wybrane z czerwonym ... za pomocą CSSZdobądź ikonę z jednego obrazu png

enter image description here

Źródło

2013-08-12 David Dury

To się nazywa CSS sprite. aby to zrozumieć, musisz mieć świadomość szerokości i wysokości każdej ikony. –

@Mr_Green Trochę to samo wyglądało, gdy istnieją różne rozmiary ikon .. –

dodanie do poniższych rozwiązań, również skorzystaj z pomocy projektanta, który utworzył ten obraz. –

który nazywany jest CSS sprites. Służy do obcięcia żądań http. Zasadniczo wszystkie ikony są umieszczone na jednym płótnie i są stosowane jako background-image nieruchomości i później są odwzorowywane za pomocą CSS background-position własność, więc na przykład

.icon1 { 
    background-image: url('YOUR_URL_HERE'); 
    background-position: 10px 10px; /* X and Y */ 
    height: 30px; 
    width: 30px; 
}

Demo

Więc inshort wystarczy zdefiniować fix wysokość/szerokość do Twój element, a następnie zmapuj płótno przy użyciu właściwości background-position. W związku z tym, jeśli na stronie znajduje się 100 małych obrazów ikon, spowoduje to wysłanie 100 zapytań do serwera, a tym samym zwiększenie wydajności, zostaną użyte Sprite CSS.

Źródło

2013-08-12 06:31:51

Jedno pytanie: jak uzyskać pozycję tła? Mam na myśli to, że próbujesz, dopóki nie uzyskasz właściwego obrazu? Czy istnieje technika lub narzędzie, które to robi? –

@DavidDury Albo ręcznie, albo otrzymasz mnóstwo [generatorów spriterzy] (https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla: en-US: oficjalny i klient = firefox-a) –

Ustaw stałą (w pikselach) height i width na elemencie
ustawić obraz jako background-image
Regulacja background-position więc część obrazu, który ma być widoczny w widoku

Źródło

2013-08-12 06:32:19 Quentin

Korzystanie ze skrótu tła do pozycjonowania obrazu.

div { 
    background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px; 
    width:27px; 
    height:27px; 
}

http://jsfiddle.net/T2EtY/1/

Źródło

2013-08-12 07:01:36

Zdobądź ikonę z jednego obrazu png

Odpowiedz

Powiązane problemy