CSS 스프라이트 소개
일반적으로 "CSS 이미지 스티칭" 또는 "CSS 텍스처 위치 지정"으로 번역됩니다. CSS Sprites는 웹 개발에서 상대적으로 성숙하게 발전한 새로운 기술이 아닙니다. CSS Sprites의 그림자는 Alibaba 자회사의 웹 페이지 어디에서나 찾아볼 수 있습니다. 그러나 CSS Sprites는 황금률은 아니지만 많은 경우에 확실한 장점이 있습니다. 가장 중요한 것은 서버의 부하를 줄이고 웹 페이지의 로딩 속도를 향상시킬 수 있다는 것입니다. 웹 디자인이 더욱 정교하고 독창적인 방향으로 발전함에 따라 디자이너는 자바스크립트가 아닌 방법을 사용하여 마우스 오버 및 호버 메뉴 효과를 만드는 것을 고려하기 시작했습니다.
직설적으로 말하면 CSS Sprites는 실제로 웹 페이지의 일부 배경 이미지를 이미지 파일로 통합한 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치"의 조합을 사용하여 배경 위치를 지정합니다. 위치는 숫자를 사용하여 배경 이미지의 위치를 정확하게 찾을 수 있습니다.
페이지가 로드되면 개별 이미지가 각각 로드되는 것이 아니라 결합된 전체 이미지가 한 번에 로드됩니다. 이는 HTTP 요청 수를 크게 줄이고, 서버 압력을 줄이고, 마우스 오버 시 이미지를 로드하는 데 필요한 시간 지연을 단축하여 효과가 더 매끄럽고 일시 중지되지 않도록 합니다.
CSS 스프라이트 관련 기사
CSS 스프라이트 애플리케이션
이와 관련하여 Taobao가 더 좋습니다. Taobao를 예로 들어 보겠습니다.
예 1: Taobao 채널 페이지 탐색
표현:
스프라이트 다이어그램:
