CSS 이미지 스플라이터
- 이전 페이지 CSS 이미지 라이브러리
- 다음 페이지 CSS 속성 선택자
이미지 스프라이트
이미지 스프라이트는 단일 이미지 안에 포함된 이미지 셋입니다.
많은 이미지를 포함한 웹 페이지는 오랜 시간이 걸리며 여러 서버 요청을 생성할 수 있습니다.
이미지 스프라이트를 사용하면 서버 요청의 수를 줄이고 밴드위드를 절약할 수 있습니다.
이미지 스프라이트 - 간단한 예제
하나의 이미지('navsprites.gif')을 사용하여 세 개의 단일 이미지 대신 사용합니다：
CSS를 사용하여 필요한 이미지 부분만 표시할 수 있습니다.
아래 예제에서 CSS는 "navsprites.gif" 이미지의 어떤 부분을 표시할지 지정합니다：
예제
#home {
width: 46px;
height: 44px;
background: url(navsprites.gif) 0 0;
}
예제 설명:
<img id="home" src="trans.gif">- 소형 투명 이미지만 정의합니다. 왜냐하면 src 속성은 비어 있을 수 없기 때문입니다. 실제로 표시되는 이미지는 CSS에서 지정한 배경 이미지입니다.width: 46px; height: 44px;- 사용할 이미지 부분을 정의합니다background: url(navsprites.gif) 0 0;- 배경 이미지 및 위치(left 0px, top 0px)를 정의합니다
이미지 스프라이트 - 네비게이션 목록 생성
우리는 스프라이트 이미지('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으로 설정하고 list-style 제거, 모든 목록 항목이 절대 위치
- #navlist li, #navlist a {height:44px;display:block;} - 모든 이미지의 높이는 44px
이제 각 특정 부분에 정위치와 스타일을 설정합니다:
- #home {left:0px;width:46px;} - 항상 왼쪽으로 정위치, 이미지 너비 46px
- #home {background:url(navsprites.gif) 0 0;} - 배경 이미지 및 위치(왼쪽 0px, 상단 0px) 정의
- #prev {left:63px;width:43px;} - 오른쪽으로 63px 정위치( #home 너비 46px + 프로젝트 간의 추가 공간), 너비 43px.
- #prev {background:url('navsprites.gif') -47px 0;} - 배경 이미지를 오른쪽으로 47px 이동( #home 너비 46px + 1px 분리선)
- #next {left:129px;width:43px;} - 오른쪽으로 129px 정위치( #prev 시작은 63px + #prev 너비는 43px + 추가 공간), 너비 43px.
- #next {background:url('navsprites.gif') -91px 0;} - 배경 이미지를 오른쪽으로 91px 이동( #home 너비 46px + 1px 분리선 + #prev 너비 43px + 1px 분리선)
이미지 스플라이트 - 휠오버 효과
이제, 우리는 네비게이션 목록에 휠오버 효과를 추가하려고 합니다.
ヒント::hover 선택자는 모든 요소에 대해 사용할 수 있으며 링크에 제한되지 않습니다.
우리의 새로운 이미지('navsprites_hover.gif')은 세 장의 네비게이션 이미지와 세 장의 휠오버 효과 이미지를 포함하고 있습니다:
이는 하나의 이미지가 아니라 여섯 개의 별도의 파일이 아니기 때문에 사용자가 이미지 위에 마우스를 올리면,로드 지연이 없습니다..
우리는 휠오버 효과를 구현하기 위해 단지 세 줄의 코드를 추가했습니다:
예제
#home a:hover {
배경: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('navsprites_hover.gif') -91px -45px;
}
예제 설명:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 우리는 모든 세 가지 휠 오버 이미지에 동일한 배경 위치를 지정했으며, 단지 45 픽셀 아래로 내렸습니다
- 이전 페이지 CSS 이미지 라이브러리
- 다음 페이지 CSS 속성 선택자
