CSS Sprite가 이미지 스티칭 기술을 구현하는 방법-CSS 튜토리얼-php.cn

1. 스프라이트 사용 시나리오:

2. CSS 스프라이트(장점)

집

웹 프론트엔드

CSS 튜토리얼

CSS Sprite가 이미지 스티칭 기술을 구현하는 방법

不言

Jul 21, 2018 am 10:38 AM

이 글은 CSS Sprite를 사용하여 이미지 스티칭 기술을 구현하는 방법을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. 스프라이트 사용 시나리오:

CSS Sprite가 이미지 스티칭 기술을 구현하는 방법

2. CSS 스프라이트(장점)

# 🎜🎜#

이미지 바이트를 줄여보세요.
웹페이지의 http 요청을 줄여 페이지 성능을 크게 향상시킵니다.
은 사진 모음에 이름을 지정할 때 웹 디자이너의 문제를 해결하므로 각 작은 요소에 이름을 지정할 필요가 없습니다. 웹페이지 제작의 효율성을 향상시킵니다.
스타일 변경은 쉽습니다. 한 장 또는 몇 장의 사진 색상이나 스타일, 그리고 전체 웹페이지의 스타일만 수정하면 됩니다. 변경될 수 있습니다. 유지관리가 더욱 편리해졌습니다.

3. 구현 원칙

css 배경 위치#🎜 🎜#레이어에 표시할 수 있는 영역의 크기를 제어합니다.

배경 이미지를 창을 통해 슬라이드합니다.

예:

# 🎜🎜# CSS Sprite가 이미지 스티칭 기술을 구현하는 방법 코드는 다음과 같습니다:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>background-position<</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <span class="oo span1"></span>
        <span class="oo span2"></span>
        <span class="oo span3"></span>
        <span class="pp span4"></span>
        <span class="ll span5"></span> 
        <span class="hh span6"></span> 
        
    </body>
</html>
.body{
    margin:0 auto;    
    text-align:center;
}
.oo{    
display:block;    
width:43px;    
height:44px;    
background:url(images/img_navsprites_hover.gif) no-repeat;
    margin:20px auto;
}
.span1{    
background-position:0 0;    
position:absolute;
    top:0px;
}
.span2{    
background-position:-47px 0;    
position:absolute;
    top:0px;
    left:60px;
}
.span3{    
background-position:-94px 0;    
position:absolute;
    top:0px;
    left:120px;
}
.span1:hover{    
background-position:0 -45px;
}
.span2:hover{    
background-position:-47px -45px;
}
.span3:hover{    
background-position:-94px -45px;
}
.pp{    
display:block;    
width:38px;    
height:38px;    
background:url(images/pwd-icons-new.png) no-repeat;
    
    margin:20px auto;
}
.span4{    
background-position:-48px -96px;
}
.ll{    
display:block;    
width:24px;    
height:26px;    
background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
    margin:20px auto;
}
.span5{    
background-position:0 -483px;
}
.hh{    
display:block;    
width:18px;    
height:18px;    
background:url(images/toolbars.png) no-repeat;
    margin:20px auto;
}
.span6{    
background-position:-95px -211px;
}

로그인 후 복사

* background-position:npx npx;

(첫 번째 값은 조정하는 것입니다 왼쪽과 오른쪽이 필요할 때 배경 이미지를 오른쪽으로 이동할 때는 양수 값을 사용하고, 왼쪽으로 이동할 때는 음수 값을 사용합니다. 마찬가지로 배경 이미지를 상하로 이동할 때는 위쪽과 양수에 음수 값을 사용합니다. 하단 값) **#🎜 🎜#렌더링은 다음과 같습니다.
(원본 사진입니다)

(선택 후 사진입니다)# 🎜🎜#

CSS Sprite가 이미지 스티칭 기술을 구현하는 방법 첫 번째 사진은 제가 선택한 원본 사진과 어두운 사진의 변환입니다. 두 번째 사진에는 기차가 있고, 다섯 번째 사진에는 악당이 있습니다.