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

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Sep 14, 2018 pm 03:55 PM

css

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.