CSS 스프라이트 기술의 용도는 무엇입니까?-CSS 튜토리얼-php.cn

CSS 스프라이트 기술의 용도는 무엇입니까?

青灯夜游

풀어 주다： 2020-11-17 18:20:16

원래의

3543명이 탐색했습니다.

css 스프라이트 기술은 여러 개의 작은 그림을 하나의 큰 그림으로 병합하므로 페이지가 처음 로드될 때 너무 많은 작은 그림을 로드할 필요가 없으며 작은 그림을 병합한 사진만 로드하면 됩니다. 사진을 더 크게 만들면 페이지 로딩 속도가 어느 정도 향상되고, 서버에 대한 부담이 줄어들고, 서버 트래픽이 절약됩니다.

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 스프라이트 기술의 용도는 무엇입니까? 태그가 아닌 CSS에 정의되어 있습니다.

이미지를 사용해야 하는 경우 현재 단계에서는 background-repeat, background-position 등과 결합된 CSS 속성 background-image를 통해 이미지를 표시합니다.

예:

CSS 스프라이트 기술의 용도는 무엇입니까?

예를 들어, 이것은 큰 스프라이트 그림입니다. 이제 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 스프라이트 기술의 용도는 무엇입니까?