CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)
- 青灯夜游원래의
- 2018-09-14 15:55:4616357검색
이 장에서는 CSS에서 스프라이트를 사용하는 방법을 소개합니다. CSS 스프라이트 이미지(스프라이트 이미지) 사용 방법을 누구나 이해할 수 있도록 배경 속성(코드 예제)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. CSS에서 스프라이트를 어떻게 사용하나요?
스프라이트를 사용하기 전에 먼저 스프라이트가 무엇인지 알아야 합니다. 스프라이트가 무엇인지 먼저 알고 스프라이트의 원리를 이해해야만 스프라이트 사용에 관해 이야기할 수 있습니다.
1. CSS 스프라이트란 무엇입니까?
css 스프라이트(sprite)는 말 그대로 "CSS 스프라이트"로 번역됩니다. "CSS 이미지 스플라이싱", "CSS 맵 포지셔닝" 또는 "CSS 이미지 스프라이트" 또는 "CSS 스프라이트"라고도 합니다. 방법. 실제로는 한 페이지에 흩어져 있는 모든 그림을 하나의 큰 그림으로 포함시키는 것입니다. 이렇게 하면 해당 페이지에 액세스할 때 로드된 그림이 이전처럼 하나씩 느리게 표시되지 않습니다.
2. CSS 스프라이트 사용 방법
css 스프라이트는 실제로 여러 이미지를 하나의 이미지로 융합한 다음 CSS 배경 위치 지정 기술을 통해 웹 페이지의 배경을 배치합니다. 이미지를 사용해야 하는 경우 현재 단계에서는 background-repeat, background-position 등과 결합된 CSS 속성인 background-image를 사용하여 이미지를 표시합니다.
3. 코드 구현:
사용된 스프라이트 재질: incn.png
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文子居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시));//引用精灵图（sprite）：incn.png
background-size: 60px 40px;
}
.sprites1 {
background-position: 0 0;
}
.sprites2 {
background-position: -20px 0;
}
.sprites3 {
background-position: 0 -20px;
}
.sprites4 {
background-position: -20px -20px;
}
.sprites5 {
background-position: -40px 0;
}
.sprites6 {
background-position: -40px -20px;
}
</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><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>렌더링:
핵심 코드:
배경 이미지: url(ic no.png );---스프라이트 이미지(incn.png)를 참조하여 스프라이트의 범위 요소에 대한 배경 이미지를 설정합니다.
background-size: 60px 40px ---배경 이미지가 설정되도록 크기를 조정합니다. 스프라이트 상자의 범위 요소 이미지는 너비(60px) 및 높이(40px)로 고정됩니다.
배경 위치 속성 --- 가장 중요한 코드인 이미지 위치 지정입니다. 스프라이트 상자의 범위 요소의 배경 이미지 위치를 설정하거나 검색합니다. background-image 속성을 사용하려면 먼저 지정해야 합니다.
설명: 배경 background-position에는 두 가지 값이 있습니다. 첫 번째 값은 왼쪽으로의 거리 값(양수 또는 음수일 수 있음)을 나타내고 두 번째 값은 위쪽까지의 거리 값(양수 또는 음수일 수 있음)을 나타냅니다. 양수일 경우 배경 이미지를 대상 상자의 배경 이미지로 사용할 때 왼쪽 및 위쪽까지의 거리를 나타냅니다. 음수일 경우 배경 이미지를 상자의 배경 이미지로 나타냅니다. 상자 개체의 왼쪽 너머로 배경 이미지를 드래그합니다. 이 배경 이미지를 표시하기 시작하려면 상자 개체의 상단을 얼마나 넘어야 할까요?
2. CSS 배경 속성의 다른 속성 값 소개
위의 background-image, background-size, background-position 속성 값 외에도 background 속성에는 다른 속성도 있습니다.
1 .ground-color: 요소의 배경색을 정의합니다. 일반적으로 단색 배경이 정의됩니다.
body {background-color:#b0c4de;}Rendering:
 "153690995485532CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)")
body {ground-color: #b0c4de;} 전체 페이지의 배경색을 다음으로 설정합니다: #b0c4de
CSS에서 색상 값은 일반적으로 다음과 같이 정의할 수 있습니다. 방법:
16진수 - 예: "#ff0000";
RGB - 예: "rgb(255,0,0)"
색상 이름 - 예: "red".
2. background-repeat: 배경 이미지의 타일링 방법을 정의합니다(타일링이 아닌 가로 또는 세로).
구문:
background-repeat：repeat-x || repeat-y || no-repeat ;
repeat-x: 수평 타일
repeat-y: 수직 타일
no-repeat: 타일 없음.
3. background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 설정합니다.
구문:
background-repeat：scroll || fixed || inherit；
scroll: 기본 속성, 페이지의 나머지 부분과 함께 스크롤되도록 배경 이미지 설정
fixed: 고정할 배경 이미지 설정
inherit: 배경 첨부 설정을 지정합니다.
부모 요소에서 상속되어야 합니다.위 내용은 CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!