CSS 스프라이트 기술의 용도는 무엇입니까?
- 青灯夜游원래의
- 2020-11-09 16:10:133541검색
css 스프라이트 기술은 여러 개의 작은 그림을 하나의 큰 그림으로 병합하므로 페이지가 처음 로드될 때 너무 많은 작은 그림을 로드할 필요가 없으며 작은 그림을 병합한 사진만 로드하면 됩니다. 사진을 더 크게 만들면 페이지 로딩 속도가 어느 정도 향상되고, 서버에 대한 부담이 줄어들고, 서버 트래픽이 절약됩니다.
추천 튜토리얼: CSS 동영상 튜토리얼
CSS 스프라이트 기술(스프라이트)이란 무엇인가요?
css 스프라이트 기술(스프라이트)은 문자 그대로 "CSS 스프라이트"로 번역되며 "CSS 이미지 스플라이싱", "CSS 맵 위치 지정" 또는 "CSS 이미지 스프라이트" 또는 "CSS 스프라이트"라고도 합니다. 처리 방법.
실제로는 한 페이지에 흩어져 있는 모든 사진을 하나의 큰 사진으로 포함시키는 것입니다. 이렇게 하면 페이지에 액세스할 때 로드된 사진이 이전처럼 하나씩 천천히 표시되지 않습니다.
스프라이트 기술을 사용하는 이유:
많은 대형 웹 페이지는 처음 로드할 때 많은 양의 작은 이미지를 로드해야 합니다. 동시에 서버가 혼잡하다는 점을 고려하여 이 문제를 해결하기 위해 스프라이트를 채택했습니다. 사용자 경험에 영향을 미치는 긴 로딩 시간 문제를 완화하는 기술입니다.
CSS 스프라이트 기술의 역할
소위 스프라이트는 여러 개의 작은 그림을 하나의 큰 그림으로 병합하는 것이므로 페이지가 처음 로드될 때 작은 그림을 너무 많이 로드할 필요가 없습니다. 그냥 작은 그림들을 합친 큰 그림, 즉 스프라이트를 로드하기만 하면 됩니다. 이렇게 하면 페이지 로딩 속도가 어느 정도 줄어들고 서버에 대한 부담이 어느 정도 완화됩니다.
1. 웹 페이지 이미지를 로드할 때 서버에 대한 요청 수를 줄입니다.
어느 위치에서나 쉽게 사용할 수 있도록 대부분의 배경 이미지와 작은 아이콘을 병합할 수 있으므로 여러 위치의 요청은 하나의 이미지만 호출하면 됩니다. 서버에 대한 요청 수를 줄이고, 페이지 로딩 속도를 향상시키며, 서버 트래픽을 절약합니다.
2. 페이지 로딩 속도 향상
스프라이트 기술의 장점 중 하나는 이미지 로딩 시간(스프라이트가 많을 때 단일 이미지의 로딩 시간)입니다. 필요한 이미지로 구성된 GIF는 모든 이미지를 합친 크기보다 훨씬 작습니다.
단일 GIF에는 연관된 색상표가 하나만 있고, 별도로 분할된 각 GIF에는 자체 색상표가 있으므로 전체 크기가 늘어납니다. 따라서 단일 JPEG 또는 PNG 스프라이트의 크기는 여러 이미지로 분할된 이미지의 전체 크기보다 작을 가능성이 높습니다.
3. 마우스를 굴릴 때 일부 버그를 줄입니다.
IE6에서는 마우스를 굴릴 때 a:hover에 배경 이미지를 적극적으로 미리 로드하지 않습니다. 따라서 여러 장의 사진을 사용하는 경우 마우스를 굴릴 때 마우스가 흰색으로 깜박입니다. . CSS Sprite를 사용하면 사진 한 장이면 충분하므로 이런 현상은 발생하지 않습니다.
CSS 스프라이트 기술 사용 방법
css 스프라이트(스프라이트)는 실제로 여러 이미지를 하나의 이미지 파일로 병합하고 CSS 배경 및 배경 위치 속성을 사용하여 렌더링하므로 태그가 더 복잡해졌습니다. 태그가 아닌 CSS에 정의되어 있습니다.
이미지를 사용해야 하는 경우 현재 단계에서는 background-repeat, background-position 등과 결합된 CSS 속성 background-image를 통해 이미지를 표시합니다.
예:
예를 들어, 이것은 큰 스프라이트 그림입니다. 이제 ANDY와 같이 원하는 문자를 철자하는 데 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.aa{
width: 108px;
height: 110px;
background-position: 0 -9px;
}
.nn{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.dd{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>최종 효과:
실제로는 직설적으로 말하면, 이미지를 큰 배경으로 설정한 후 배경 위치를 통해 배경 이미지를 이동시켜 표시하고 싶은 부분을 표시하는 것입니다.
스프라이트 차트가 서버 부담과 사용자 경험 문제를 완화했지만 여전히 몸 전체에 영향을 미친다는 큰 단점이 있습니다. 이 사진의 배경은 모두 우리가 자세히 측정한 것입니다. 페이지를 변경해야 한다면 매우 번거로운 작업이 될 것입니다. . .
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 CSS 스프라이트 기술의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!