CSS 이미지 스티칭 기술
이미지 스티칭
이미지 스티칭은 단일 이미지 모음입니다.
이미지가 많은 웹페이지는 로드하고 여러 서버에 요청을 생성하는 데 시간이 오래 걸릴 수 있습니다.
이미지 스티칭을 사용하면 서버 요청 수가 줄어들고 대역폭이 절약됩니다.
이미지 스티칭 - 간단한 예
세 개의 개별 이미지를 사용하는 대신 다음과 같이 단일 이미지를 사용합니다.
CSS를 사용하면 이미지에서 필요한 부분만 표시할 수 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.home {
width: 46px;
height: 44px;
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") 0 0;
}
.next {
width: 43px;
height: 44px;
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") -91px 0;
}
</style>
</head>
<body>
<p class="home"></p><br><br>
<p class="next"></p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 분석:
너비: 46px; 우리가 사용하는 것 이미지의 해당 부분
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")
0 0 - 배경을 정의합니다. 이미지 및 위치(왼쪽 0px, 위쪽 0px)
이것은 이미지 스티칭을 사용하는 가장 쉬운 방법입니다. 이제 링크와 호버 효과를 사용합니다.
이미지 스티칭 - 탐색 목록 만들기
스티칭 이미지("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")를 사용하여 탐색 목록을 만들고 싶습니다. .
링크 가능하고 배경 이미지도 지원하므로 HTML 목록을 사용합니다.
Instances
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#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('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -91px 0;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="/"></a></li>
<li id="prev"><a href="/css/"></a></li>
<li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
분석 예시:
#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;} - 가장 왼쪽에 위치 지정하고 이미지의 너비는 46px입니다
#home{Background:url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
") 0 0;} - 배경 이미지를 정의하고 위치 지정(왼쪽 0px, 위쪽 0px)#prev{왼쪽:63px;너비:43px;} - 오른쪽 위치 63px(#home 너비 46px + 항목 사이에 약간의 추가 공간), 너비 43px.
#prev{Background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') -47px 0;} - 오른쪽에 47px를 정의하세요. 배경 이미지의 (#집 너비 46px + 구분선 1px)#next{left:129px;width:43px;}- 오른쪽 위치 129px (#prev 63px + #prev 너비는 43px + 남은 공간), 너비는 43px.
#next{배경:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') no-repeat -91px 0;} - 정의 배경 이미지 91px 오른쪽(#home 46px+1px Divider + #prev wide 43px+1px Divider)
Image Splices - Hover Effect
이제 탐색 목록에 호버 효과를 추가하려고 합니다.
 |
|
|---|
새 이미지("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif")에는 3개의 탐색 이미지와 3개의 이미지가 포함되어 있습니다.
이것은 단일 이미지이기 때문입니다. 6개의 별도 이미지 파일 대신 사용자가 이미지 위로 마우스를 가져갈 때 지연 로딩이 발생하지 않습니다.
호버 효과를 추가하려면 세 줄의 코드만 추가합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#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('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 0;}
#home a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px 0;}
#prev a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px 0;}
#next a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px -45px;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 분석:
이 목록 항목에는 링크가 포함되어 있으므로 hover pseudo-class
#home a:hover{배경: 투명 URL("https://img.php.cn/upload/course)을 사용할 수 있습니다. /000/000/015/ 5c64fdaa5b0ba752.gif
") 0 -45px;} - 세 개의 호버 이미지 모두에 대해 동일한 배경 위치를 지정합니다. 각각 아래로 45px만 더
