Tek png görüntüsünden simge alın

Question

Şimdiye kadar bu kadar çok kez gördüm, ama kendimi hiç kullanmadım. Biri size CSS sprites denir css

Answer 1

kullanarak ... örneğin, bu tek png görüntüden ben kırmızı ile seçilmiş simgeler belirli simge resim elde nasıl açıklayabilir. Http isteklerini azaltmak için kullanılır. örneğin

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

Demo

Yani inshort sadece bir düzeltme yükseklik/genişlik tanımlamak böylece Temelde bütün simgeler, tek tuval üzerine yerleştirilir ve background-image özelliği olarak kullanılmakta ve daha sonra onlar CSS background-position özelliği kullanılarak eşleştirilir öğeniz ve background-position özelliğini kullanarak tuvali eşleştirin. Bu yüzden, bir sayfada 100 küçük simge görüntüsü varsa, sunucuya 100 istekte bulunacak, böylece performansı arttırmak için CSS Sprite kullanıldı.

Answer 2

1. ayarlayın, böylece görünür olmasını isteyen görüntü parçası görünümünde background-position ayarlama background-image
2. olarak ayarlamak bir eleman
3. üzerinde height ve width (piksel) sabit

Answer 3

Görüntünün konumlandırılması için arka plan kısayolunun kullanılması.

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

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