CSS Sprites 작은 예제 코드_경험 교환

매우 간단한 애플리케이션이지만 설계상 서버에 대한 부담을 줄이고 요청 횟수를 줄일 수 있는 좋은 방법입니다.
이렇게 작은 사진에 두 장의 사진을 올려도 응답 시간이 크게 느리지 않다는 점에 유의해야 합니다. 하지만 두 장의 사진이 교대로 표시되면 배경 사진이 다시 로드되기 쉽습니다. 효과가 오랫동안 나타나지 않습니다. (서버의 응답 속도와 이미지 크기에 따라 시간이 달라집니다)

다음은 CSS 부분입니다:

body {
font-family: "Lucida Sans", "Lucida Sans" 유니코드 ";
글꼴 크기: 14px;
줄 높이: 24px;
}
ul {
목록 스타일 유형: 없음;
}
li {
float: 왼쪽;

}
a{
배경 이미지: url(bg.gif)
높이: 26px
배경 위치: 53px 0px;
디스플레이: 블록;
여백: 10px;
텍스트 정렬: 센터
색상: #333333; li a:link {
텍스트 장식: 없음
}
li a:visited {
텍스트 장식: 없음
}
li a:hover {
text -꾸밈: 없음;
background-position: 0 0px;//특정 좌표에서 이미지 표시를 시작하도록 여기에서 지정합니다.}


위 코드를 보면 어렵지 않습니다. 이것이 결정적인 역할을 한다는 것

background-position:* *px


이 방법으로 복잡한 CSS 애플리케이션에서 배경 이미지를 다시 로드하는 문제를 해결할 수 있습니다.