CSS - Sprites arka plan resmi olarak

Question

Kimin performansı ı geliştirmek için çalışıyorum bir web uygulaması vardır. Bunu yapmak için css sprite kullanmaya karar verdim. Tüm resimlerimi images.png adı verilen bir .png dosyasına yerleştirdim.

CSS spriteları, bir görüntüyü bir kez görüntüleyen tüm css sınıfları için iyi çalıştı. Bununla birlikte, bazı resimlerimin tekrarlanması gerekiyor. Örneğin, banner arka planı için kullanılan bir banner.png resmim var. Arka plan tekrarı özelliğini her ayarladığımda, görüntünün tekrarlanmadığı görülür. Benim CSS tanımları göstermek için burada onlar:

Before CSS Sprites 
------------------ 
.ghwc { 
    background-image: url(/images/layout/banner.png); 
    background-repeat:repeat-x; 
    color:White; 
    width:300px; 
} 

After CSS Sprites 
----------------- 
.ghwc { 
    background-image: url(/images/images.png); 
    background-repeat:repeat-x; 
    color:White; 
    background-position:60px 319px; 
    width:300px; 
} 

Sorum şu, nasıl geçmişleri gibi tekrarlanan görüntüler için CSS sprite kullanıyorsunuz?

nasıl geçmişleri gibi tekrarlanan görüntüler için CSS sprite kullanırım,

Answer 1

Sorum şu, teşekkür ederiz?

Yapmıyorsunuz. Bu sadece CSS sprite kullanılarak mümkün değildir. Bunu yapmak için, tekrarlanacak görüntünün bir alanını ve CSS 2 ve 3'ün her ikisinde de imkansız olduğunu bilmem gerekir.

Answer 2

Arka plan resminiz varsayarsak (images.png) gösterir, kodunuz çalışmalıdır. Bunun Opera ve Firefox'ta doğru bir şekilde oluşturulmasını istiyorsanız,

arka plan ekini eklemeniz gerekir: sabit;

Düzenleme: Birden çok "görüntü" içeren bir "hareketli" görüntüde ayarlanmış belirli bir koordinattan söz ettiğinizi fark ettim. Bir görüntünün belirli bir alanını böyle tekrar etmeyeceksin. Resmi, ilgilendiğiniz boyuta göre kırpın, sonra sahip olduğunuz kodu kullanın.

Answer 3

Örnekte olduğu gibi sadece background-repeat:repeat-x; iseniz, bunu yapabilirsiniz, sadece aynı genişlikte bulunan tüm arka planların aynı genişlikte olmasını ve hareketli görüntü dosyasını dikey olarak dışarı çıkarmanız yeterlidir. Ardından, arka plan konum özelliğiniz her zaman ilk x konumuna 0 ve sprite ikinci y konumuna sahip olur (ör. background-position:0 0; background-position:0 -100px; background-position:0 -200px; vb.). Tam yüksekliği belirtemezseniz ve overflow:hidden olarak ayarlanmışsanız, bu durum tüm tarayıcılarda çalışmayabilir.

Answer 4

Eğer x tekrarı kullanmak isterseniz, tüm hareketli grafiğin x-yönünde (zaten fark ettiğiniz gibi) çoğaltıldığından, grafiğinizde yan yana birkaç resim koymamalısınız. Ama onları bir dikey hatta koyabilirsiniz. (Yinelemeyi kullanmak isterseniz başka bir yol var. Şimdiye kadar "arka plan-ürün" gibi bir şey yok (belki CSS4? 'De);