1. 스프라이트 맵이란 무엇입니까?
사용자가 웹사이트를 방문하면 브라우저는 일련의 요청을 서버에 보냅니다. 예를 들어 웹페이지의 각 이미지는 최종적으로 사용자에게 표시되기 전에 요청을 거쳐야 합니다. 그러나 웹 페이지에는 종종 많은 수의 이미지 리소스(예: 페이지에 표시되는 사진, 웹 페이지의 배경 이미지, 일부 장식 이미지 등)가 포함되어 있어 브라우저가 자주 서버를 요청하게 됩니다. 웹 페이지의 로딩 속도를 줄입니다. 서버에 대한 요청 수를 효과적으로 줄이고 페이지 로딩 속도를 향상시키기 위해 스프라이트 기술 이라고도 알려진 CSS Sprites 기술이 등장했습니다.
소위 스프라이트 맵은 여러 개의 작은 그림을 하나의 큰 그림으로 결합하고 CSS의 배경 위치 속성을 통해 스프라이트 맵에 작은 아이콘을 표시하는 그림 스티칭 기술입니다.
사진: 타오바오의 스프라이트 맵
스프라이트 차트는 다음과 같습니다.
2. 스프라이트 차트의 장점
1. 스프라이트 기술을 사용하면 사용자 경험에 영향을 미치는 긴 로딩 시간 문제를 완화할 수 있습니다.
2. 페이지 로딩 속도를 어느 정도 감소시켜 서버에 대한 부담을 어느 정도 완화시킵니다.
3. 스프라이트를 사용하면 서버가 요청을 받고 보내는 횟수를 효과적으로 줄여 페이지 로딩 성능을 향상시킬 수 있습니다.
3. 스프라이트 차트의 기본 사용법
1. 도구: PS, HBuilder
2. 재질: 어떤 스프라이트 맵이라도 가능합니다.
1단계: ps를 열고 스프라이트 맵 가져오기
여기에 적힌 글자는 YY입니다.
2단계: 글자의 크기와 좌표 측정
(1) 직사각형 마키 도구를 사용하여 글자의 크기를 측정하고 div의 크기를 글자의 크기로 설정합니다.
(2) 윈도우 메뉴바에서 정보를 열면 글자의 너비, 높이, x축, y축 정보를 조회할 수 있습니다.
(3) 마우스 커서를 글자의 왼쪽 상단으로 이동시킨 후, 오른쪽 정보 패널을 통해 x, y 값을 측정합니다.
(4) CSS로 스타일을 작성하고 background-position을 통해 글자의 위치를 찾습니다.
렌더링
암호:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>스프라이트 사용</title><style>/*공통 스타일*/div{Background:url(D:/dotcpp/img /picture .jpg);/*스프라이트 리소스 가져오기*/float:left;/*왼쪽 부동 설정*/}.box1{/*상자의 높이와 너비는 스프라이트의 크기와 일치해야 합니다*/width:149px; height :140px;Background-position:296px143px;/*각각 x축과 y축에 해당*//*PS에서 위치를 지정할 때 직사각형 선택 항목의 왼쪽 상단에 커서를 놓고 위치를 가져옵니다*/}.box2 {/* 상자의 높이와 너비는 스프라이트의 크기와 일치해야 합니다. */width:149px;height:140px; background-position:296px143px;/*각각 x 축과 y 축에 해당합니다*//* ps에서 위치 지정, 직사각형 선택의 왼쪽 상단에 커서를 놓으면 위치를 얻을 수 있습니다. */}</style></head><body><divclass=box1></div><divclass=box2> </div></body></html>