CSS 스프라이트란 무엇입니까? CSS 스프라이트 기술 요약

Css 스프라이트는 프론트엔드 직원으로서 마스터해야 하는데, 막 배우는 학생들에게는 어렵습니다. 이 콘텐츠를 위해 특별히 공유하겠습니다. 여기에 콘텐츠가 표시되면. 포괄적인 내용은 아니지만 제 개인 블로그에서 확인하실 수 있습니다

CSS Sprite는 중국의 많은 사람들이 CSS Sprite라고 부르며 웹 이미지 응용 프로그램 처리 방법입니다. 페이지에 포함된 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함할 수 있으므로 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 표시되지 않습니다. 현재 널리 사용되는 네트워크 속도의 경우 200KB를 초과하지 않는 단일 이미지에 필요한 로딩 시간은 기본적으로 동일하므로 이 문제에 대해 걱정할 필요가 없습니다. 가속의 핵심은 무게를 줄이는 것이 아니라 대수를 줄이는 것이다. 전통적인 사진 자르기에서는 사진 크기가 작을수록 좋고, 무게가 작을수록 좋습니다. 실제로 크기는 중요하지 않으며 컴퓨터는 모두 바이트 단위로 계산됩니다. 클라이언트는 이미지를 표시할 때마다 서버에 요청을 보냅니다. 따라서 이미지가 많을수록 요청도 많아지고 지연 가능성도 커집니다.

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

아래에서는 그 사용법을 자세히 설명하겠습니다. 이는 현재 이해하지 못하는 어린이 신발에 대한 명확하고 새로운 이해를 제공할 것입니다. 비록 현재 이러한 도구가 있지만 여전히 그 원리를 이해해야 합니다. 그리고 테크닉을 먼저 하시면 포지셔닝을 빠르게 완성하실 수 있습니다.

우선, 배치해야 할 배경이 모두 하나의 사진으로 병합되므로 X축 좌표가 모두 일치하거나 모두 동일하다는 점을 설명하고 싶습니다. Y축 좌표가 일치합니다. 아래에 2가지 유형이 설명되어 있습니다.

1. 가로 위치 좌표

가로 위치 좌표는 Y축 좌표가 고정되어 있음을 의미하며, 각 아이콘의 높이가 일정하고, X좌표의 위치를 ​​변경하면 배경이 바뀌는 것이 특징입니다. 각 아이콘의 너비를 측정하여 x축 좌표를 알아보세요. 아직도 이 규칙을 모른다면 아래에서 제가 했던 두 가지 사례를 예로 들어 설명하겠습니다.

여기서는 X좌표를 position으로 변경하는 방법을 자세히 설명하겠습니다.

높이가 동일하므로 Y축 좌표는 모두 0 또는 상단입니다

여기서는 각 아이콘의 배경으로 스팬을 사용합니다.

<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
                <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
                <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span  class="sharelogo flickrLogo"></span></a></li>
                <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
                <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
            </ul>
        </div>

다음은 CSS 코드입니다:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
 
.facebookLogo{background-position:0 0;width:20px;}
 
.pinterestLogo{background-position:-20px 0;width:42px;}
 
.twitterLogo{background-position:-62px 0;width:30px;}/**/
 
.flickrLogo{background-position:-92px 0;width:130px;}
 
.youtubeLogo{background-position:-222px 0;width:98px}
 
.blogLogo{background-position:-320px 0;width:84px;}
 
.sl{float:left;padding-right:10px;}

그들의 배경 이미지는 모두 이 배경을 공유합니다: background-image:url(../images/shareIcon.jpg);

각 요소의 배경은 반복될 수 없습니다. 즉, background-repeat:no-repeat;

이 내용을 읽은 후 규칙을 발견했습니다. 즉, 각 요소의 좌표는 동일합니다. 이전 요소의 좌표에 너비를 더한 값입니다. 즉, 요소의 수평좌표값 공식은 다음과 같습니다. 인접한 요소의 좌표값에 너비를 더한 값입니다.

pinterestLogo의 값은 facebookLogo의 좌표 값 20px + facebookLogo의 너비 20px와 같습니다. 가로 좌표는 다음과 같아야 하기 때문에 요소의 너비만 알면 매우 간단하지 않나요? 너비가 고정되어 있으므로 한 단계로 너비를 측정하는 것은 시간 낭비가 아닙니다. 소스코드에서 좌표값의 패턴을 자세히 살펴보시길 바라겠습니다.

가로 또는 세로로 배치할 때 시작 위치는 background-position: 0 0입니다. 가로로 배치할 때는 높이가 고정되어 있으므로 매번 X 좌표만 변경하면 값이 구현됩니다. .

예를 들어 페이스북의 로고는 시작 위치의 아이콘이므로 좌표값이 0,0으로 위치를 구현합니다.

그러면 pinterest 로고는 그 아래 로고로, facebook 너비의 음수 값으로 계산됩니다. Facebook의 너비는 21px이므로 pinterest 로고의 좌표는 background-position:-20px 0입니다.

twitterLogo는 pinterstLogo 아래에 있으며 pinterstLogo와 pinterstlogo의 좌표 값을 사용합니다

너비를 사용하면 twitterLogo의 좌표 위치를 얻을 수 있습니다. 즉, -(20px+42px)=-62px입니다. 즉, twitterLogo의 좌표 값은 입니다.twitterLogo{Background-position:-62px 0;width:30px;}

이 글을 읽고 나면 패턴, 즉 모든 인접 요소의 좌표는 이전 요소의 좌표 값에 이전 요소의 너비를 더한 값과 같습니다. 즉, 요소의 수평좌표값은 같습니다. 인접한 요소의 좌표 값에 너비를 더한 값입니다. 좋습니다. 두 번째 옵션에 대해 이야기해 보겠습니다.

2. 수직 위치 지정 좌표

세로 위치 지정 좌표는 X축 좌표가 고정되어 있고 Y축 좌표 값이 변경되어 배경이 바뀌는 것을 의미하므로 너비가 고정됩니다. X축 좌표는 항상 동일하며 0 또는 왼쪽입니다. 아래에 사례를 공유하겠습니다

Css 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}
.p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/
</style>
</head>
                                                                                           
<body>
<ul>                                                                                           
<li class="f"></li>
<li class="p"></li>
<li class="fr"></li>
<li class="h"></li>
<li class="t"></li>
</ul>
</body>
</html>

3. 너비와 높이가 같을 때 직접 곱셈을 하는 것이 가장 좋습니다. 저는 초등학교 3학년입니다. 공유하겠습니다.

1. 너비와 높이를 동일하게 하려는 경우 X축 좌표가 동일해야 하는 상황이 일반적으로 버튼 그룹에서 발생하며 마우스를 슬라이드하고 클릭하면 배경이 변경됩니다. 이 상황도 정리했습니다:

X축 좌표 =-n(시작 위치 + 너비)

여기서 n 값은 0부터 시작합니다. 즉, 모든 시작 위치의 좌표는 0부터 시작하여 0입니다. 다음은 유사합니다.

예를 들어 지금 배치하려는 요소는 세 번째 요소입니다. 여기서 아이콘의 너비가 30픽셀이라고 가정하면 X축 좌표는 입니다. x=-3*(0+30px);

Y축 좌표 =-n(시작 위치 + 높이)

예를 들어 지금 배치하려는 아이콘은 6번째 위치입니다. , 여기의 높이도 32px라고 가정하면 Y축 좌표는

Y=-6 (0+32px) =-192px입니다. 하하, 물론 많은 도구가 있는데, gaga라는 도구는 꽤 좋은데 저는 한번도 사용해본 적이 없습니다. 실제로는 매우 편리하다고 생각해서 공유하고 싶습니다.

위 내용은 CSS 스프라이트란 무엇입니까? CSS 스프라이트 기술 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!