CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)-CSS 튜토리얼-php.cn

CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)

青灯夜游

풀어 주다： 2018-09-14 15:55:46

원래의

16385명이 탐색했습니다.

이 장에서는 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

CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)

코드:

<!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>

로그인 후 복사

렌더링:

CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)

핵심 코드:

배경 이미지: 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:

CSS에서 스프라이트를 사용하는 방법은 무엇입니까? 배경 속성 소개(코드 예시)

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!