구현 스프라이트 특성도 CSS 배경 위치 : 실제에 웹 프런트 엔드 엔트리

스프라이트지도는 무엇인가

스프라이트도가 스프라이트 또한 CSS 스프라이트를 호출 된 CSS이고, CSS는 사진을 여러 장 아이콘으로 통합하고 표시 될 부분을 표시하기 위해 CSS의 배경 위치를 사용하여야하고, 화상 합성 기술이다.

왜 사용 스프라이트지도

로드 웹 이미지, 페이지의 로딩 속도를 개선 IE6를 해결하기 위해 표시 흰색 플래시 할 때 서버에 요청의 수를 줄일 수 있습니다 때 현상 위에 마우스 롤.

스프라이트 맵과 단점은 무엇입니까

개인적으로 생각 스프라이트 그림은하지 기본적으로 어떤 단점이 매우 복잡하고 매우 큰되지 않습니다. 스프라이트가 크고 복잡한 사건을 그리는 경우, CSS 코드 검토, 메모리 및 대형 페이지 회계 문제가 나타납니다.

예

위는 버튼이고, 두 번째는 그 위에 때 마우스처럼

이것은 두 스프라이트도 합성에 작은 아이콘 인

<div class="user"><span></span>个人中心</div>
.user {
    width: 108px;
    height: 34px;
    border:1px #ddd solid;
    float: right;
    margin-top: 36px;
    line-height: 34px;
    border-radius: 3px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}
.user span{
    display: inline-block;
    width: 20px;
    height: 22px;
    overflow:hidden;
    margin:5px 10px 5px 10px;
    float:left;
    background-image:url(../img/user.png);
    background-repeat: no-repeat;
    background-position: 0px -22px;    
    transition: all 0.3s;
    -moz-transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
}

.user:hover {
    border:1px #ff9600 solid;
    color:#f00;
}
.user:hover span{
    background-position: 0px 0px;
}
web前端开发学习Q-q-u-n： 491404389  ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

이 코드의 구현이며,이 과도한 자기 효과 (전환) 무시하세요.

영상 위치의 시작을 결정하는 것도 가능하지 않았다. 사실 매우 간단만큼 당신이 그 사진은 왼쪽 위 모서리 (0,0)에서 기억으로 시작했다.

나는이 이해 볼 수 있는지 모른다