CSS
Duszki obrazu CSS

Składnia

• // Używanie pozycji tła
  background: url ("sprite-image.png");
  pozycja tła: -20px 50px;
• // Skrót właściwości w tle
  background: url ("sprite-image.png") -20px 50px;

Uwagi

Podstawowa implementacja

Co to jest duszek obrazu?

Obrazek to pojedynczy zasób umieszczony w arkuszu obrazka. Arkusz obrazków to plik obrazu, który zawiera więcej niż jeden zasób, który można z niego wyodrębnić.

Na przykład:

Powyższy obraz jest obrazkiem sprite, a każda z tych gwiazd jest duchem wewnątrz arkusza sprite. Te arkusze sprite są przydatne, ponieważ poprawiają wydajność, zmniejszając liczbę żądań HTTP, które może wymagać przeglądarka.

Jak więc wdrożyć jeden? Oto przykładowy kod.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Używając ustawienia szerokości i wysokości duszka oraz używając właściwości background-position w CSS (z wartościami x i y), możesz łatwo wydobyć duszki z arkusza duszka za pomocą CSS.