CSS는 이미지 병합 기술을 어떻게 사용합니까?

이 장에서는 CSS에서 이미지 스티칭 기술을 사용하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 이미지 스티칭

이미지 스티칭은 단일 이미지의 모음입니다.

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

이미지 스티칭을 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다.

2. 이미지 스티칭 - 간단한 예

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

CSS를 사용하면 해당 부분만 표시할 수 있습니다. 우리에게 필요한 이미지의

다음 예에서 CSS는 "img_navsprites.gif"를 표시하는 이미지의 일부를 지정합니다.

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

예제 분석:

• 비어 있으면 src 속성은 작은 투명 이미지만 정의합니다. 표시되는 이미지는 CSS에서 지정한 배경 이미지입니다.

• 너비: 46px; 높이: 44px - 사용하는 이미지 부분을 정의합니다. background:url(img_navsprites.gif) 0 0; 배경 이미지 및 위치(왼쪽 0px, 위쪽 0px)

• 이것은 이미지 스티칭을 사용하는 가장 쉬운 방법입니다. 이제 링크 및 호버 효과를 사용합니다.

3. 이미지 스티칭 - 탐색 목록 만들기

스티칭된 이미지("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{position:relative;} - 위치는 상대 위치를 설정하여 내부를 절대 위치로 만듭니다

• #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - 여백과 패딩이 0으로 설정되고 목록 스타일이 제거되며 모든 목록 항목이 절대적으로 적용됩니다. position

• #navlist li, #navlist a{height:44px;display:block;} - 모든 이미지의 높이는 44px입니다

• 이제 각 특정 섹션의 위치 지정 및 스타일에 대해 알아보세요.

#home{left :0px;width:46px;} - 가장 왼쪽에 배치하고 이미지의 너비는 46px

• #home{Background:url(img_navsprites.gif) 0 0;} - 정의합니다. 배경 이미지 및 위치(왼쪽 0픽셀, 위쪽 0픽셀)

• #prev{왼쪽:63px;너비:43px;} - 위치는 오른쪽 63픽셀(#홈 너비 46픽셀 + 항목 사이에 약간의 추가 공간), 너비 43픽셀입니다.

• #prev{배경:url('img_navsprites.gif') -47px 0;} - 배경 이미지를 오른쪽으로 47px 정의합니다(#home 너비 46px + 구분선 1px)

• #next{left :129px; width:43px;}- 올바른 위치는 129px(#prev 63px + #prev 너비는 43px + 남은 공간), 너비는 43px입니다.

• #next{Background:url('img_navsprites.gif' ) no-repeat - 91px 0;} - 배경 이미지 오른쪽에 91px을 정의합니다. (#home 46px+1px 구분선 + #prev 넓은 43px+1px 구분선)

4. 이미지 스티칭 s - 호버 효과

이제 탐색 목록에 호버 효과를 추가하고 싶습니다. :hover 선택기는 요소 위로 마우스를 가져가는 효과를 표시하는 데 사용됩니다.

팁: :hover 선택기는 모든 요소에 적용될 수 있습니다.

새 이미지("img_navsprites_hover.gif")에는 탐색 이미지 3개와 이미지 3개가 포함되어 있습니다.

이것은 단일 이미지이고 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;}

분석 예:

목록 항목에 링크가 포함되어 있으므로 다음을 사용할 수 있습니다. hover pseudo-class

• #home a:hover {배경: 투명 url(img_navsprites_hover.gif) 0 -45px;} - 세 개의 호버 이미지 모두에 대해 동일한 배경 위치를 지정합니다. 각각 아래로 45px만 더

위 내용은 CSS는 이미지 병합 기술을 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!