CSS
CSS 이미지 스프라이트

통사론

• // background-position을 사용한다.
  배경 : url ( "sprite-image.png");
  배경 위치 : -20px 50px;
• // 백그라운드 속성 속기
  배경 : url ( "sprite-image.png") -20px 50px;

비고

기본 구현

이미지 스프라이트 란 무엇입니까?

이미지 스프라이트는 이미지 스프라이트 시트 내에있는 단일 애셋입니다. 이미지 스프라이트 시트는 이미지 스프라이트 시트에서 추출 할 수있는 둘 이상의 애셋을 포함하는 이미지 파일입니다.

예 :

위 이미지는 이미지 스프라이트 시트이며, 각 별은 스프라이트 시트 내의 스프라이트입니다. 이러한 스프라이트 시트는 브라우저에서 HTTP 요청 수를 줄여 성능을 향상시키기 때문에 유용합니다.

그럼 어떻게 구현하나요? 다음은 몇 가지 예제 코드입니다.

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;
}

스프라이트의 너비와 높이를 설정하고 CSS의 배경 위치 속성 (x 및 y 값 사용)을 사용하면 CSS를 사용하여 스프라이트 시트에서 스프라이트를 쉽게 추출 할 수 있습니다.