CSS Görsel Sırları

Görsel Sihirbazı

Görsel Sihirbazı, tek bir görsel içinde bulunan görsel koleksiyonudur.

Birçok görseli içeren web sayfaları, uzun süre yüklenebilir ve çok sayıda sunucu istekleri oluşturabilir.

Görsel Sihirbazı kullanmak, sunucu isteklerinin sayısını azaltır ve bant genişliğini tasarruf eder.

Görsel Sihirbazı - Basit Örnek

Tek bir görsel ("navsprites.gif") kullanıyoruz,而不是 üç ayrı görsel:

Navigasyon Görseli

CSS kullanarak yalnızca gerekli görselin bir kısmını göstermek mümkündür.

Aşağıdaki örnekte, CSS "navsprites.gif" görselinin hangi kısmının gösterileceğini belirtir:

örnek

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Kişisel olarak deneyin

Örnek Açıklama:

  • <img id="home" src="trans.gif"> - Yalnızca küçük şeffaf görseller tanımlayın, çünkü src özelliği boş olamaz. Gerçekten gösterilen görsel, CSS'te tanımladığımız arka plan görsel olacaktır.
  • width: 46px; height: 44px; - Kullanmak istediğimiz görsel kısmını tanımlayın
  • background: url(navsprites.gif) 0 0; - Arka plan görselini ve konumunu (sol 0px, üst 0px) tanımlayın

Görsel Sihirbazı - Navigasyon Listesi Oluşturma

Kendi navigasyon listesini oluşturmak için "navsprites.gif" görselini kullanmak istiyoruz.

HTML listesi kullanacağız, çünkü bu, bağlantı olarak kullanılabilir ve aynı zamanda arka plan resimlerini destekler:

örnek

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Kişisel olarak deneyin

Örnek Açıklama:

  • #navlist {position:relative;} - Konum, absolute konum sağlamak için绝对 olarak ayarlanmıştır
  • #navlist li {marj:0;boşluk:0;list-style:none;konum:nabiyolojik;} - Marj ve iç boşluklar 0 olarak ayarlanır, list-style kaldırılır ve tüm listeleme kalemleri nabiyolojik konumlandırılır
  • #navlist li, #navlist a {yükseklik:44px;görünüm:block;} - Tüm görsellerin yüksekliği 44px

Şimdi, her belirli bölge için konumlandırma ve stilleri ayarlamaya başlıyoruz:

  • #home {sol:0px;genişlik:46px;} - Her zaman sola konumlandır, görsel genişliği 46px
  • #home {background:url(navsprites.gif) 0 0;} - Arkaplan görselini ve konumunu (sol 0px, üst 0px) tanımla
  • #prev {sol:63px;genişlik:43px;} - Sağa 63px (home genişliği 46px + projeler arasındaki bazı ekstra boşluk), genişlik 43px
  • #prev {background:url('navsprites.gif') -47px 0;} - Arkaplan görselini sağa 47px (home genişliği 46px + 1px ayırma çizgisi) tanımla
  • #next {sol:129px;genişlik:43px;} - Sağa 129px (prev başlangıcı 63px + prev genişliği 43px + fazlalık boşluk), genişlik 43px
  • #next {background:url('navsprites.gif') -91px 0;} - Arkaplan görselini sağa 91px (home genişliği 46px + 1px ayırma çizgisi + #prev genişliği 43px + 1px ayırma çizgisi) tanımla

Görsel Sözlüğü - Farenin Üstüne Gelme Etkisi

Şimdi, navigasyon listesine farenin üstüne gelme etkisini eklemek istiyoruz.

İpucu::hover seçici tüm elementler için kullanılabilir, sadece bağlantılara sınırlı değildir.

Yeni görselimiz ("navsprites_hover.gif") üç navigasyon görseli ve üç farenin üstüne gelme etkisi görseli içerir:

Navigasyon Görseli

Çünkü bu bir görseldir, altı ayrı dosya değil, bu yüzden kullanıcı fareyi görsel üzerinde gezdirirken,Yükleme gecikmesi olmayacak。

Sadece üç satır kod ekleyerek farenin üstüne gelme etkisini gerçekleştirebiliriz:

örnek

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Kişisel olarak deneyin

Örnek Açıklama:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Tüm üç tıklama görseline aynı arka plan konumunu belirledik, sadece 45 pixel aşağıya