CSS Image Sprite는 문서 페이지의 모든 그림을 결합한 이미지 파일입니다. 이미지 스프라이트는 이미지 리소스를 한 번만 로드해야 하므로 유용합니다. CSS background-position을 사용하여 결합된 이미지의 다른 부분을 표시할 수 있습니다.
CSS Image Sprites의 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
background: url("Capture.png") no-repeat;
width: 280px;
height: 200px;
display: inline-block;
}
.flag1 {
background-position: 0px 0px;
}
.flag2 {
background-position: -255px 0px;
}
.flag3 {
background-position: -510px 0px;
}
.flag4 {
background-position: -765px 0px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html> 출력
