“ görüntü spriteları ”, birden fazla tek görüntüden oluşan büyük bir görüntünün oluşturulduğu bir tekniktir. Ve büyük görüntünün herhangi bir bölümü, tasarım gereksinimlerine göre görüntülenebilir. Geliştiricilerin görsel olarak çekici öğeleri sorunsuz bir şekilde oluşturmasına yardımcı olur. Görüntü sprite'ları simgeler, düğmeler ve diğer grafik öğeler için kullanılabilir. Bu makale, CSS'de görüntü sprite kullanma prosedürünü adım adım göstermektedir.
Nasıl Kullanılır? CSS'de büyücü Sprites?
CSS'de geliştiriciler, bir web sayfasının yükleme süresini en aza indirmek/azaltmak için görüntü sprite'larını kullanır. HTTP isteklerini azaltmaya yardımcı olur, daha hızlı yükleme sağlar ve kullanıcı deneyimi faktörünü geliştirir. Örneğin, aşağıdaki örneği ziyaret edin:
Örnek: Liste Öğesinde Görüntü Sprite Kullanma
Bu örnekte, sıralı bir liste oluşturulur ve her liste öğesinde hareketli grafiğin bir kısmı ekranda görüntülenir.
ön koşul:
Görüntü hareketli grafiğinden belirli bir görüntüyü elde etmek için, kullanılan görüntü hareketli grafiğinin boyutları özellikle önemlidir. Örneğin, “boyutlu görüntü” 937×156 ” aşağıda gösterilmiştir:
Yukarıda görüntülenen görüntünün bir kısmını görüntülemek için aşağıdaki adımları izleyin:
Adım 1: Liste Öğelerinin Oluşturulması
Sırasız liste, aşağıdaki kod parçacığında görüldüğü gibi web sayfasında oluşturulur:
< Ul >Boş: < O İD = 'boş' > O >
Yarım: < O İD = 'yarım' > O >
Tam dolu: < O İD = 'tam dolu' > O >
Ul >
Yukarıdaki kod parçacığının açıklaması:
-
- İlk olarak, “
' etiket. - Ardından, “ kimliklerini atayın boş ”, “ yarım ' Ve ' tam dolu ” üç liste öğesi için. Bunlar daha sonra daha büyük görüntünün bir kısmını görüntülemek için kullanılır.
- İlk olarak, “
2. Adım: İlk Resmin Görüntülenmesi
Görüntü hareketli grafiğindeki ilk görüntü olan boş kalbi web sayfasında görüntülemek için. Kullan ' boş ” id ve aşağıdaki kodu girin:
#boş {genişlik: 157 piksel;
yükseklik: 150 piksel;
arka plan: url ( .. / sprite.jpg ) 0 0 ;
}
Yukarıdaki kod satırında:
-
- İlk olarak, “ Genişlik ' Ve ' yükseklik ” geliştiricinin web sayfasında görüntülemek istediği görüntünün.
- Bu özellikler “ değerlerine atanır. 157 piksel ' Ve ' 150 piksel ” yukarıda verilen örneğe göre, ancak farklı boyutlara sahip görüntülere göre değişebilir.
- Ardından, “ yolunu sağlayın peri ” görseli “ arka plan ' mülk. Şimdi, “ yönünü ayarlayın 0 ' Ve ' 0 ” ve görüntü hareketli grafiğinin ilk bölümünü görüntüler.
Yukarıdaki kod satırının yürütülmesinden sonra, web sayfası şöyle görünür:
Yukarıdaki anlık görüntü, görüntü hareketli grafiğindeki ilk görüntünün web sayfasında görüntülendiğini gösterir.
3. Adım: Ortadaki ve Son Görüntüyü Görüntüleme
Görüntü hareketli grafiğinden orta ve son görüntü bölümünü görüntülemek için aşağıdaki CSS özelliklerini ekleyin:
#yarım {genişlik: 157 piksel;
yükseklik: 150 piksel;
arka plan: url ( .. / sprite.jpg ) -462px 0 piksel
}
#tam dolu {
genişlik: 157 piksel;
yükseklik: 150 piksel;
arka plan: url ( .. / sprite.jpg ) -770px 0 piksel
}
Yukarıdaki kod parçacığının açıklaması:
-
- İlk olarak, “ yarım ” id ve yukarıdaki adımda kullanılan aynı CSS özelliklerini ekleyin.
- Görüntü hareketli grafiğinden ortadaki görüntüyü görüntülemek için yönü değiştirin veya sol taraftan dolgu atayın. Örneğin, soldan yön “ olarak ayarlanmıştır. negatif 462 piksel ”.
- Aynı şekilde yönü soldan “” olarak ayarlayarak son görüntüyü görüntüleyin. -770px ”.
Yukarıdaki CSS özelliklerinin yürütülmesinden sonra, web sayfası şöyle görünür:
Yukarıdaki anlık görüntü, görüntü hareketli grafiğinden üç görüntünün web sayfasında görüntülendiğini gösterir.
Çözüm
“ görüntü spriteları ”, tıpkı kolaj özelliği gibi birden çok küçük görüntüden oluşan tek bir büyük görüntüdür. Ve büyük görüntünün daha küçük bir görüntüyü temsil eden herhangi bir kısmı görüntülenebilir. Gereksinimlere göre “ arka plan ” CSS tarafından sağlanan özellik. Görüntü hareketli grafiğinden belirli bir görüntüyü görüntülemek için önce görüntünün genişliğini ve yüksekliğini ayarlayın. Bundan sonra, görüntü hareketli grafiğinden görüntünün yalnızca bir kısmını görüntülemek için yön değerlerini kullanın.