CSS 스프라이트는 무엇입니까-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS 스프라이트는 무엇입니까

青灯夜游

May 12, 2021 pm 04:44 PM

CSS 스프라이트는 웹 페이지의 배경 이미지를 처리하는 방법입니다. 이는 실제로 페이지에 포함된 모든 흩어져 있는 그림을 하나의 큰 그림으로 포함시킨 다음 이러한 방식으로 웹 페이지에 큰 그림을 적용합니다. 사용자가 페이지를 방문하면 서비스에 요청만 보내면 됩니다. 배경 이미지를 완전히 표시할 수 있습니다.

CSS 스프라이트는 무엇입니까

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 스프라이트란 무엇인가요?

"CSS 이미지 스플라이싱", "CSS 텍스처 포지셔닝" 또는 "CSS 이미지 스프라이트", "CSS 스프라이트"라고도 알려진 "CSS 스프라이트"는 웹 이미지 응용 프로그램 처리 방법입니다. 실제로는 한 페이지에 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함시키는 것입니다. 이렇게 하면 해당 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 느리게 표시되지 않습니다.

사용자가 페이지를 방문할 때 서비스에 요청만 보내면 웹페이지의 모든 배경 이미지가 표시될 수 있습니다.

예:

CSS 스프라이트는 무엇입니까

장점

CSS Sprite를 사용하면 웹 페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. 이는 CSS Sprite의 가장 큰 장점이기도 합니다.
CSS Sprites는 이미지 3개를 1개 이미지로 병합하는 데 필요한 바이트 수를 여러 번 비교했는데 그 바이트 수는 항상 이들의 총 바이트 수보다 작습니다. 이미지 3개.
사진 모음에 이름을 지정하는 웹 디자이너의 문제를 해결합니다. 모든 작은 요소에 이름을 지정할 필요가 없으므로 웹 페이지 제작의 효율성이 향상됩니다.
스타일 변경은 쉽습니다. 한 장 또는 몇 장의 사진 색상이나 스타일만 수정하면 전체 웹페이지의 스타일을 변경할 수 있습니다. 유지관리가 더욱 편리해졌습니다.

스프라이트 기술의 사용

css 스프라이트(스프라이트)는 실제로 여러 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정 기술을 통해 웹 페이지의 배경을 배치하는 것입니다. 이미지를 사용해야 하는 경우 현재 단계에서는 background-repeat, background-position 등과 결합된 CSS 속성인 background-image를 사용하여 이미지를 표시합니다.

예:

스프라이트 분석:

CSS 스프라이트는 무엇입니까

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sprites{
            width: 200px;
            margin: 50px auto;
        }
        .sprites div{
            margin: 5px;
        }
        .sprites span{
            float: left;
            width: 20px; 
            height:20px;
            background: url(&#39;./images/icon.png&#39;);/* 引用精灵图 */
            background-size: 60px 40px;
        }
        .sprites1{
            background-position: 0 0;
        }
        .sprites2{
            background-position: -20px 0 !important;
        }
        .sprites3{
            background-position: 0 -20px !important;
        }
        .sprites4{
            background-position: -20px -20px !important;
        }
        .sprites5{
            background-position: -40px 0 !important;
        }
    </style>

</head>
<body>
    <div class="sprites">
        <div><span class="sprites1"></span>付款图标</div>
        <div><span class="sprites2"></span>存款图标</div>
        <div><span class="sprites3"></span>删除图标</div>
        <div><span class="sprites4"></span>粘贴图标</div>
        <div><span class="sprites5"></span>笑脸图标</div>
    </div>
</body>
</html>

CSS 스프라이트는 무엇입니까