CSS 스프라이트를 사용하는 방법

CSS 스프라이트 사용 방법: 먼저 웹 페이지의 일부 배경 이미지를 이미지 파일로 통합한 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치" 조합을 사용하여 배경 위치를 지정합니다. 할 수 있다.

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css Video Tutorial"

CSS 스프라이트는 중국의 많은 사람들이 CSS 스프라이트라고 부르는 웹 이미지 응용 프로그램 처리 방법입니다. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 현재 널리 사용되는 네트워크 속도의 경우 200KB를 초과하지 않는 단일 이미지에 필요한 로딩 시간은 기본적으로 동일하므로 이 문제에 대해 걱정할 필요가 없습니다.

CSS Sprites 기술을 가속화하는 핵심은 무게를 줄이는 것이 아니라 개수를 줄이는 것입니다. 전통적인 사진 자르기에서는 사진 크기가 작을수록 좋고, 무게가 작을수록 좋습니다. 실제로 크기는 중요하지 않으며 컴퓨터는 모두 바이트 단위로 계산됩니다. 클라이언트는 이미지를 표시할 때마다 서버에 요청을 보냅니다. 따라서 이미지가 많을수록 요청도 많아지고 지연 가능성도 커집니다.

css 스프라이트 사용법

CSS 스프라이트는 실제로 웹 페이지의 일부 배경 이미지를 하나의 이미지 파일로 통합한 다음 CSS "배경 이미지", "배경 반복" 및 "배경 위치"의 조합을 사용합니다. 배경 위치 지정, 배경 위치는 숫자를 사용하여 배경 이미지의 위치를 ​​정확하게 찾을 수 있습니다.

예:

HTML

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>

CSS

<style>
       .box {
         width: 600px;
         height:300px;
         border: 3px solid #ccc;
         background-color: #8064A2;
        }
        span {
         display: inline-block;
         width: 25px;
         height: 25px;
         border: 3px solid #ccc;
         background-image: url(css/img/sidebar.png);
         background-repeat: no-repeat;
         margin: 5px;
        }
       .icon1 {
         background-position: 0 0;
        }
       .icon2 {
         background-position: -40px 0;
        }
       .icon3 {
         background-position: 0 -25px;
        }
       .icon4 {
         background-position: -40px -25px;
        }
</style>

렌더링:

CSS 스프라이트의 장점:

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

3. 이름 지정 난이도를 줄입니다.

4. 유지관리가 더 편리합니다.

CSS 스프라이트의 단점:

1. 이미지를 병합할 때 여러 이미지를 질서 있고 합리적인 방식으로 하나의 이미지로 병합해야 하며, 섹션에 불필요한 배경이 나타나지 않도록 충분한 공간을 남겨두어야 합니다. 가장 고통스러운 것은 와이드스크린과 고해상도 화면에서 적응형 페이지입니다. 사진이 충분히 넓지 않으면 배경이 깨지기 쉽습니다.

2. 페이지가 있으면 CSS Sprites가 더 번거롭습니다. 배경이 약간 변경되면 일반적으로 병합된 이미지를 변경해야 합니다. 원래 위치에 배치할 수 없는 경우 CSS를 더 이상 변경하지 않으려면 변경할 필요가 없는 부분을 건드리지 않는 것이 가장 좋습니다. , (바람직하게는) 그림을 추가할 수 있으므로 그림의 바이트가 늘어나고 CSS를 수정해야 합니다.

위 내용은 CSS 스프라이트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!