CSS에서 이미지 스프라이트를 사용하는 방법?

위의 코드 스니펫에 대한 설명:

• • 먼저 '
    ' 태그를 사용하여 '에 대한 컨테이너/환경을 생성합니다. 정렬되지 않은 목록 '를 사용하여 세 개의 목록 항목을 만듭니다. <그> ” 태그.
    • 다음으로 '의 ID를 할당합니다. 비어 있는 ”, “ 반 ' 그리고 ' 가득한 ” 세 가지 목록 항목에 대해. 이들은 나중에 더 큰 이미지의 일부를 표시하는 데 사용됩니다.

  2단계: 첫 번째 이미지 표시

  이미지 스프라이트의 첫 번째 이미지인 웹 페이지에 빈 마음을 표시합니다. 사용 ' 비어 있는 ” id를 입력하고 다음 코드를 삽입합니다.

  #비어 있는 {
  너비: 157px;
  높이: 150px;
  배경: URL ( .. / 스프라이트.jpg ) 0 0 ;
  }

  
  위의 코드 줄에서:

  • • 먼저 ' 너비 ' 그리고 ' 키 ” 개발자가 웹 페이지에 표시하려는 이미지의.
    • 이러한 속성은 ' 157픽셀 ' 그리고 ' 150픽셀 ”는 위에 제공된 예에 따라 표시되지만 크기가 다른 이미지에 따라 다를 수 있습니다.
    • 다음으로 ' 스프라이트 ” 이미지를 “ 배경 ' 재산. 이제 '의 방향을 설정하십시오. 0 ' 그리고 ' 0 ” 이미지 스프라이트의 첫 번째 부분을 표시합니다.

  위의 코드 행을 실행한 후 웹 페이지는 다음과 같습니다.

  
  위의 스냅샷은 이미지 스프라이트의 첫 번째 이미지가 웹 페이지에 표시되는 것을 보여줍니다.

  3단계: 중간 및 마지막 이미지 표시

  이미지 스프라이트에서 중간 및 마지막 이미지 부분을 표시하려면 다음 CSS 속성을 삽입합니다.

  #반 {
  너비: 157px;
  높이: 150px;
  배경: URL ( .. / 스프라이트.jpg ) -462px 0px
  }
  #가득한 {
  너비: 157px;
  높이: 150px;
  배경: URL ( .. / 스프라이트.jpg ) -770px 0px
  }

  
  위의 코드 스니펫에 대한 설명:

  • • 먼저 ' 반 ” id를 입력하고 위 단계에서 사용한 것과 동일한 CSS 속성을 삽입합니다.
    • 이미지 스프라이트에서 중간 이미지를 표시하려면 방향을 변경하거나 왼쪽에서 패딩을 할당합니다. 예를 들어, 왼쪽에서 방향은 ' 네거티브 462px '.
    • 같은 방법으로 왼쪽에서 방향을 '로 설정하여 마지막 이미지를 표시합니다. -770px '.

  위의 CSS 속성을 실행하면 웹 페이지가 다음과 같이 나타납니다.

  
  위의 스냅샷은 이미지 스프라이트의 세 이미지가 웹 페이지에 표시되었음을 보여줍니다.

  결론

  “ 이미지 스프라이트 ”는 콜라주 기능처럼 여러 개의 작은 이미지로 구성된 하나의 큰 이미지입니다. 그리고 더 작은 이미지를 나타내는 큰 이미지의 모든 부분을 표시할 수 있습니다. '를 사용하는 요구 사항에 따라 배경 ” 속성은 CSS에서 제공합니다. 이미지 스프라이트에서 특정 이미지를 표시하려면 먼저 이미지의 너비와 높이를 설정합니다. 그런 다음 방향 값을 활용하여 이미지 스프라이트에서 이미지의 일부만 표시합니다.