CSS 스프라이트(CSS 스프라이트)

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

일반 CSS Sprite는 웹 이미지 응용 프로그램 처리 방법입니다. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 그런 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치" 조합을 사용하여 배경 위치를 지정합니다.

2. CSS Sprite 사용의 장점과 단점

장점:

1. 웹페이지의 http 요청을 줄여 페이지 성능을 크게 향상시킵니다.

2. 사진의 바이트 수를 줄입니다. 여러 사진을 하나의 사진으로 병합하는 바이트는 항상 여러 사진의 바이트 수를 합친 것보다 작습니다.

3. 사진 이름 문제를 해결하세요.

단점:

1. 사진을 합칠 때에는 여러 장의 사진을 질서있고 합리적으로 하나의 사진으로 합치고, 섹션에 불필요한 배경이 들어가지 않도록 충분한 공간을 남겨두어야 합니다.

2. 와이드 스크린 및 고해상도 화면의 적응형 페이지에서는 사진이 충분히 넓지 않으면 배경이 깨지기 쉽습니다.

3. CSS Sprites를 개발할 때는 각 배경 단위의 정확한 위치를 측정하고 계산해야 합니다. CSS Sprites 스타일 생성 도구를 사용하는 것이 좋습니다.

4. CSS 스프라이트 유지 관리 중에 페이지 배경이 약간 변경되면 일반적으로 병합된 이미지를 변경해야 합니다.

요약: 일반적으로 CSS Sprites 결합 레이아웃은 로컬 작은 상자 레이아웃에 사용되며 큰 배경 및 큰 레이아웃 배경에는 적합하지 않습니다. 예를 들어 작은 부분 레이아웃, 작은 아이콘 배경, 작은 탐색 배경 및 기타 CSS 레이아웃이 있습니다. 간단히 말해서 CSS Sprite를 사용할지 여부를 결정하기 전에 장점과 단점을 비교해야 하는 경우가 많습니다.

3. 밤 주세요

이모지 사진

                                                                   

최종 효과:

html 코드:

<ul>
    <li class="Emoji1"></li>
    <li class="Emoji2"></li>
    <li class="Emoji3"></li>
    <li class="Emoji4"></li>
</ul>

CSS 코드:

*{
        margin: 0px;
    }
    ul,li{
        list-style: none;
    }
    li{
        width:50px;
        height:50px;
        overflow: hidden;
        background: url('Emoji.jpg') -0px -0px no-repeat;
    }
     .Emoji1{
        background-position: -0px -0px;
    }
    .Emoji2{
        background-position: -0px -50px;
    }
    .Emoji3{
        background-position: -0px -100px;
    }
    .Emoji4{
        background-position: -0px -150px;
    }