1. 페이지에 흩어져 있는 배경 이미지를 모두 모아서 큰 이미지로 만든 후, 큰 이미지를 웹 페이지에 활용하세요. 사용자가 페이지에 액세스할 때 서버에 한 번만 요청을 보내면 됩니다.
2. background-position 등의 속성을 직접 활용하여 필요한 배경 부분을 정확하게 찾아냅니다.
예
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>제목</title>
</head>
<본문>
<div>
<스팬></스팬>
<스팬></스팬>
<스팬></스팬>
</div>
</body>
<스타일>
.박스 범위 {
디스플레이: 인라인 블록;
}
.j {
배경: url("abcd.jpg") no-repeat -389px -141px;
너비: 102px;
높이: 112px;
}
.w {
배경: url("abcd.jpg") no-repeat -117px -560px;
너비: 135px;
높이: 112px;
}
.t {
배경: url("abcd.jpg") no-repeat -368px -417px;
너비: 102px;
높이: 112px;
}
</style>
</html>위 내용은 CSS 스프라이트 기술에 대한 소개입니다. 모든 분들께 도움이 되기를 바랍니다.