>  기사  >  웹 프론트엔드  >  CSS는 이미지 병합 기술을 어떻게 사용합니까?

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

青灯夜游
青灯夜游원래의
2018-09-14 17:45:101789검색

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

1. 이미지 스티칭

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

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

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

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

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

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

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

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

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

예제 분석:

  • CSS는 이미지 병합 기술을 어떻게 사용합니까? 비어 있으면 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개의 개별 이미지 파일이 아니기 때문에 사용자가 이미지 위로 마우스를 가져가면 게으름이 발생하지 않습니다. 로딩.

CSS는 이미지 병합 기술을 어떻게 사용합니까?호버 효과를 추가하기 위해 세 줄의 코드만 추가합니다:

#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.