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

Şimdiye kadar bu kadar çok kez gördüm, ama kendimi hiç kullanmadım. Biri size CSS sprites denir cssTek png görüntüsünden simge alın

enter image description here

kaynak

2013-08-12 David Dury

Bu css sprite denir. Bunu anlamak için, her simgenin genişliğinin ve yüksekliğinin farkında olmanız gerekir. –

@Mr_Green Farklı boyut simgeleri varken de aynı şeyi yapmıştım .. –

aşağıdaki özümleri de ekleyerek, bu görüntüyü yaratan tasarımcıdan da yardım alın. –

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ı.

kaynak

2013-08-12 06:31:51

Tek soru: Arka plan konumunu nasıl edinirsiniz? Doğru resmi elde edene kadar denediğini mi söylüyorsun? Bunu yapan bir teknik mi yoksa bir araç mı var? –

@DavidDury El ile veya tonlarca [sprite jeneratörü] alacaksınız (https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla: tr: resmi & client = firefox-a) –

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
olarak ayarlamak bir eleman
üzerinde height ve width (piksel) sabit

kaynak

2013-08-12 06:32:19 Quentin

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/

kaynak

2013-08-12 07:01:36

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

cevap

İlgili konular