CSS 이미지 스프라이트

이미지 스프라이트

이미지 스프라이트는 단일 이미지에 넣은 이미지 모음입니다.

이미지가 많은 웹 페이지는 여러 서버 요청을로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다.

이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다.

이미지 스프라이트-간단한 예

세 개의 별도 이미지를 사용하는 대신이 단일 이미지 ( "img_navsprites.gif")를 사용합니다.

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

 

 

• <img id="home" src="img_trans.gif">-src 속성은 비워 둘 수 없으므로 작고 투명한 이미지 만 정의합니다. 표시된 이미지는 CSS에서 지정한 배경 이미지가됩니다.
• width: 46px; height: 44px; -사용하려는 이미지 부분을 정의합니다
• background: url(img_navsprites.gif) 0 0; -배경 이미지와 위치를 정의합니다 (왼쪽 0px, 위쪽 0px)

이미지 스프라이트를 사용하는 가장 쉬운 방법입니다. 이제 링크와 호버 효과를 사용하여 이미지 스프라이트를 확장하려고합니다.

Making the Image Sprite

 

We made this sprite image by combining 10 separate images in a single image (mySprite.png). You can create your own sprite using any image editing tool you like.

 .prev:before {
    background-image: url(dgns_ico_com.svg);
    background-size: 385px 367px;
    background-position: -1px -1px;
    width: 15px;
    height: 15px;
    content: '';
    display: inline-block;
    vertical-align: top;
    margin: 2px 1px 0 0;
} 

 

<p>
       <button class="prev">이전</button>
       
   </p>
   
   
   <style>
    .prev:before { 
    background-image: url(dgns_ico_com.svg); 
    background-size: 385px 367px; 
    background-position: -1px -1px; 
    width: 15px; 
    height: 15px; 
    content: ''; 
    display: inline-block; 
    vertical-align: top; 
    margin: 2px 1px 0 0; 
} 
   
   </style>