이미지 스프라이트
이미지 스프라이트는 하나의 이미지에 넣어 이미지의 모음입니다.
많은 이미지와 웹 페이지를로드하는 데 시간이 오래 걸릴 및 여러 서버 요청을 생성 할 수 있습니다.
이미지 스프라이트를 사용하여 서버에 요청의 수를 감소시키고 대역폭을 절약한다.
이미지 스프라이트 - 간단한 예제
대신 별도의 세 가지 이미지를 사용하여, 우리는이 하나의 이미지 사용 ("img_navsprites.gif") :
CSS, 우리는 우리가 필요로하는 이미지의 단지 부분을 표시 할 수 있습니다.
다음 예에서 CSS는의 어느 부분을 지정합니다 "img_navsprites.gif" 표시 할 이미지 :
예 설명 :
-
<img id="home" src="img_trans.gif">- src 속성이 비어있을 수 없기 때문에 단지 작은 투명 이미지를 정의합니다. 표시된 이미지는 우리가 CSS에서 지정하는 배경 이미지가 될 것입니다 -
width: 46px; height: 44px;width: 46px; height: 44px;- 우리가 사용하고자하는 이미지의 부분을 정의합니다 -
background: url(img_navsprites.gif) 0 0;- 배경 이미지와 위치를 정의 (왼쪽 0 픽셀, 최고 0 픽셀)
이것은 지금 우리는 링크를 사용하여 확장 효과를 가져하려면, 이미지 스프라이트를 사용하는 가장 쉬운 방법입니다.
이미지 스프라이트는 - 탐색 목록 만들기
우리는 스프라이트 이미지를 사용하려면 ("img_navsprites.gif") 탐색 목록을 만들 수 있습니다.
이 링크 될 수 있고 배경 화상을지지 할 수 있기 때문에 우리는 HTML 목록을 사용한다 :
예
#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;
}
»그것을 자신을 시도 예 설명 :
- #navlist {position:relative;} - 위치는 그 안에 절대 위치 할 수 있도록 상대적으로 설정
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 마진과 패딩은 목록 스타일을 제거, 0으로 설정하고, 모든 목록 항목은 위치 지정된 절대됩니다
- #navlist li, #navlist a {height:44px;display:block;} - 모든 이미지의 높이 44px 있습니다
이제 각각의 특정 부분에 대한 위치와 스타일을 시작합니다
- #home {left:0px;width:46px;} - 위치한 왼쪽으로, 이미지의 폭은 x 46 픽셀입니다
- #home {background:url(img_navsprites.gif) 0 0;} - 정의 배경 이미지 및 위치 (왼쪽 0 픽셀, 최고 0 픽셀)
- #prev {left:63px;width:43px;} - 오른쪽 (#home 폭 x 46 픽셀 + 항목 사이에 약간의 여분의 공간)에 63px 위치 및 폭이 43px입니다.
- #prev {background:url('img_navsprites.gif') -47px 0;} - 오른쪽에있는 배경 이미지 47px을 정의 (#home 폭 x 46 픽셀 + 1 픽셀 라인 분배기)
- #next {left:129px;width:43px;} - 오른쪽 129px 위치 (#prev의 시작은 63px + #prev 폭 43px + 여분의 공간), 폭이 43px입니다.
- #next {background:url('img_navsprites.gif') -91px 0;} - 오른쪽에있는 배경 이미지 91px을 정의 (#home 폭 x 46 픽셀 + 1 픽셀 라인 분배기 + #prev 폭 43px + 1 픽셀 라인 분배기)
이미지 스프라이트 - 호버 효과
이제 우리는 우리의 탐색 목록에 호버 효과를 추가 할 수 있습니다.
 | 팁 : :hover 선택은 링크뿐만 아니라, 모든 요소에 사용할 수 있습니다. |
|---|
우리의 새로운 이미지 ("img_navsprites_hover.gif") 호버 효과를 사용하는 세 개의 탐색 이미지와 세 개의 이미지가 포함되어 있습니다 :
이 하나의 이미지, 그리고 여섯 별도의 파일이기 때문에 사용자가 이미지를 가리킬 때,더로드 지연이있을 수 없습니다.
우리는 호버 효과를 추가하는 코드의 세 줄을 추가합니다 :
예
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
} »그것을 자신을 시도 예 설명 :
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} 세 호버 이미지의 경우 우리는 45 픽셀 더 아래, 같은 배경 위치를 지정 -