CSS 이미지 모자이크 기술
분할 이미지
이미지를 평평하게하는 것은 개별 이미지의 모음입니다.
로드하고 여러 서버 요청을 생성하는 데 시간이 오래 걸릴 수 있습니다 페이지에 많은 이미지가 있습니다.
요청의 수를 감소시키고 대역폭을 절약 할 이미지 서버 분할을 사용한다.
분할 이미지 - 간단한 예제
대신 우리는이 하나의 이미지 ( "img_navsprites.gif")를 사용할 때, 별도의 세 가지 이미지를 사용 :
CSS, 우리는 우리가 필요로하는 이미지의 일부를 표시 할 수 있습니다.
아래의 예에서 이미지 "img_navsprites.gif"지정된 CSS의 일부를 보여줍니다
분석의 예 :
- <IMG 클래스 = "홈"SRC = "img_trans.gif은"/> - 그들은 비어있을 수 없기 때문에, src 속성은 작은 투명 이미지를 정의합니다. 표시되는 이미지는 우리가 CSS 배경 이미지로 지정됩니다
- 폭 : x 46 픽셀, 높이 : 44px; - 우리가 사용하는 이미지의 정의 부분
- 배경 : 홈페이지 (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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
#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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
»시도
분석의 예 :
- #navlist {위치 : 상대;} - 위치가 상대 위치를 설정하고, 내부 절대 위치 허용
- #navlist 리 {여백 : 0; 패딩 : 0; 목록 스타일 : 없음; 위치 : 절대; 최고 : 0;} - 마진과 패딩이 목록 스타일이 삭제되고 0으로 설정, 모든 목록 항목은 절대 위치입니다
- 44px 모든 이미지의 높이가 - #navlist 리는 {:; 블록 디스플레이 44px 높이를} #navlist
이제 각 특정 부분의 위치 및 스타일 :
- 왼쪽에 배치하고, 화상 폭 x 46 픽셀 인 방법 - {#home :; 0 픽셀 x 46 픽셀 왼쪽 폭}
- #home {배경 : 홈페이지 (img_navsprites.gif) 0 0;} - 사용자 정의 배경 이미지 및 위치 (왼쪽 0 픽셀, 최고 0 픽셀)
- #prev {왼쪽 : 63px; 폭 : 43px;} - 오른쪽 위치 63px (#home 폭 x 46 픽셀 + 항목 사이에 약간의 여분의 공간), 43px의 폭에.
- #prev {배경 : 홈페이지 ( 'img_navsprites.gif') -47px 0;} - 오른쪽 47px에 사용자 정의 배경 이미지 (#home 분할 폭 x 46 픽셀 + 1 픽셀)
- {왼쪽 : 129px; 폭 : 43px;} # 다음 - 오른쪽 위치 129px에 (#prev의 63px + #prev 폭 43px + 나머지 공간), 폭은 43px입니다.
- # 다음 {배경 : 홈페이지 ( 'img_navsprites.gif') 노 반복 -91px 0;} - 오른쪽 91px에 사용자 정의 배경 이미지 (#home x 46 픽셀 + 1 픽셀 구분선 + # 이전 폭 43px + 1 픽셀 분할)
이미지의 병합 - 효과를 가져
이제, 우리는 우리의 탐색 목록이 호버 효과를 추가 할 수 있습니다.
 | : 요소 표시 위에 마우스를 올려의 효과 호버 선택 팁 :: 호버 선택기 모든 소자에 적용될 수있다. |
|---|
우리의 새로운 이미지 ( "img_navsprites_hover.gif")는 세 개의 탐색 이미지와 세 개의 이미지가 포함되어 있습니다 :
이 단일 이미지이므로, 사용자가 이미지에 남아 6 대신에 별도의 이미지 파일을 로딩을 지연하지 않을 것이다.
우리는 호버 효과 코드의 세 줄을 추가 :
예
#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;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
»시도
분석의 예 :
- 목록 항목에 대한 링크를 포함하기 때문에, 우리는 사용할 수 있습니다 : 가상 클래스를 가져
- 세 호버 이미지의 경우 우리는 같은 배경 위치를 지정하지만 아래로 45 픽셀 각 -; {투명 URL (img_navsprites_hover.gif) 0 -45px 배경} 가져가 다음을 #home