CSS 스프라이트는 무엇입니까
- 青灯夜游원래의
- 2021-05-12 16:44:442516검색
CSS 스프라이트는 웹 페이지의 배경 이미지를 처리하는 방법입니다. 이는 실제로 페이지에 포함된 모든 흩어져 있는 그림을 하나의 큰 그림으로 포함시킨 다음 이러한 방식으로 웹 페이지에 큰 그림을 적용합니다. 사용자가 페이지를 방문하면 서비스에 요청만 보내면 됩니다. 배경 이미지를 완전히 표시할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 스프라이트란 무엇인가요?
"CSS 이미지 스플라이싱", "CSS 텍스처 포지셔닝" 또는 "CSS 이미지 스프라이트", "CSS 스프라이트"라고도 알려진 "CSS 스프라이트"는 웹 이미지 응용 프로그램 처리 방법입니다. 실제로는 한 페이지에 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함시키는 것입니다. 이렇게 하면 해당 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 느리게 표시되지 않습니다.
사용자가 페이지를 방문할 때 서비스에 요청만 보내면 웹페이지의 모든 배경 이미지가 표시될 수 있습니다.
예:
장점
CSS Sprite를 사용하면 웹 페이지의 http 요청을 크게 줄일 수 있으므로 페이지 성능이 크게 향상됩니다. 이는 CSS Sprite의 가장 큰 장점이기도 합니다.
CSS Sprites는 이미지 3개를 1개 이미지로 병합하는 데 필요한 바이트 수를 여러 번 비교했는데 그 바이트 수는 항상 이들의 총 바이트 수보다 작습니다. 이미지 3개.
사진 모음에 이름을 지정하는 웹 디자이너의 문제를 해결합니다. 모든 작은 요소에 이름을 지정할 필요가 없으므로 웹 페이지 제작의 효율성이 향상됩니다.
스타일 변경은 쉽습니다. 한 장 또는 몇 장의 사진 색상이나 스타일만 수정하면 전체 웹페이지의 스타일을 변경할 수 있습니다. 유지관리가 더욱 편리해졌습니다.
스프라이트 기술의 사용
css 스프라이트(스프라이트)는 실제로 여러 이미지를 하나의 이미지로 병합한 다음 CSS 배경 위치 지정 기술을 통해 웹 페이지의 배경을 배치하는 것입니다. 이미지를 사용해야 하는 경우 현재 단계에서는 background-repeat, background-position 등과 결합된 CSS 속성인 background-image를 사용하여 이미지를 표시합니다.
예:
스프라이트 분석:
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div{
margin: 5px;
}
.sprites span{
float: left;
width: 20px;
height:20px;
background: url('./images/icon.png');/* 引用精灵图 */
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0 !important;
}
.sprites3{
background-position: 0 -20px !important;
}
.sprites4{
background-position: -20px -20px !important;
}
.sprites5{
background-position: -40px 0 !important;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>存款图标</div>
<div><span class="sprites3"></span>删除图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
</div>
</body>
</html>
학습 동영상 공유: css 동영상 튜토리얼
위 내용은 CSS 스프라이트는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!