CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)-CSS 튜토리얼-php.cn

CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)

青灯夜游

풀어 주다： 2018-10-19 15:04:43

원래의

51573명이 탐색했습니다.

프런트 엔드 페이지 개발 시 이미지를 표시하는 방법에는 두 가지가 있습니다. 즉, img 태그는 이미지를 표시하고, background 속성은 배경 이미지를 표시하도록 설정됩니다. img 이미지가 중앙에 위치할 수 있다는 것을 알고 있으므로 배경 이미지도 중앙에 위치할 수 있습니까? 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 이번 글에서는 CSS에서 배경 이미지를 중앙에 배치하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 CSS를 사용하여 배경 이미지를 브라우저 중앙에 배치하는 방법을 살펴보겠습니다.

사실 CSS의 background-position 속성은 배경 이미지의 가로 및 세로 가운데 정렬을 구현할 수 있습니다. 아래에서는 간단한 코드 예제를 사용하여 배경 이미지를 설정하는 방법을 소개합니다. 중심이 되도록.

먼저 배경 이미지를 표시하기 위해 background 속성을 사용합니다:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        background-image:url(CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)) ;
		        background-size:200px 160px ;
		        background-repeat:no-repeat ;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)

다음으로 background-position 속성을 설정하는 방법을 살펴보겠습니다:

1 Background-position은 픽셀을 사용하여 배경을 설정합니다. 이미지를 중앙에 배치합니다(배경 이미지의 크기를 알아두세요)

예제에서는 배경 이미지의 오른쪽 하단이 데모 상자의 중앙과 일치합니다. 배경 이미지를 중앙에 배치하려면 만들어야 합니다. 배경 이미지의 중심이 데모 상자의 중심과 일치합니다. 배경 이미지의 절반을 아래쪽으로 이동하고 오른쪽으로 절반만큼 이동해야 합니다. 따라서 배경 이미지를 중앙에 배치하려면 CSS에 다음 코드를 추가하세요

background-position:100px 70px ;  /*宽的一半，高的一半*/

로그인 후 복사

Rendering:

CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)

2. Background-position은 50%를 사용하여 배경 이미지를 중앙에 배치하므로 매우 편리합니다

background-position:50% 50% ;

로그인 후 복사

3. position 배경 이미지를 중앙에 배치하려면 center를 사용하십시오. 이는 매우 편리합니다. (두 번째 센터는 생략 가능)

background-position:center center;

로그인 후 복사

위의 세 가지 background-position 설정 방법은 모두 배경 이미지의 센터링을 구현할 수 있습니다. background-position 속성의 첫 번째 값은 가로 위치를 설정하고, 두 번째 값은 설정합니다. 상황에 따라 어떤 방법을 사용할지 결정할 수 있습니다. 더 많은 관련 튜토리얼을 보려면 CSS3 비디오 튜토리얼 , Html5 비디오 튜토리얼 , bootstrap 비디오 튜토리얼 을 방문하세요.

위치 위치 지정을 사용하여 CSS에서 이미지 중심 정렬을 달성하는 3가지 방법(코드 예)

위 내용은 CSS에서 배경 이미지를 중앙에 배치하는 방법은 무엇입니까? 배경 이미지를 중앙에 배치하는 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!