CSS는 배경 크기를 설정-프런트엔드 Q&A-php.cn

Hello World!

집

웹 프론트엔드

프런트엔드 Q&A

CSS는 배경 크기를 설정

王林

May 21, 2023 pm 12:10 PM

CSS는 배경 크기 설정을 비롯한 다양한 스타일과 효과를 가능하게 하는 웹 디자인 및 레이아웃에 사용되는 언어입니다. 배경 크기는 웹 페이지가 로드될 때 배경 이미지의 크기 및 표시 모드를 나타냅니다. 배경 크기를 적절하게 설정하면 웹 페이지의 미관을 향상시킬 수 있을 뿐만 아니라 사용자 경험도 향상시킬 수 있습니다. 다음으로 CSS를 사용하여 배경 크기를 설정하는 방법을 자세히 설명하겠습니다.

1. 배경 크기 속성을 사용하세요.

배경 크기 속성은 배경 크기를 설정하는 데 사용됩니다. 배경 이미지의 크기와 표시 모드를 지정할 수 있습니다. 일반적으로 사용되는 세 가지 값은 Cover, Contain 및 px입니다. 구체적으로 각각 다음을 나타냅니다.

cover: 배경 이미지가 항상 전체 배경 영역을 덮도록 만듭니다. 그러나 이미지가 배경 영역보다 작은 경우 전체 배경 영역을 덮도록 이미지가 자동으로 늘어나거나 확대됩니다.
contain: 배경 이미지가 원래 크기를 유지하면서 늘어나지 않고 최대한 배경 영역의 중앙에 나타나도록 합니다.
px: 배경 이미지의 크기를 직접 지정합니다. 고정 값, 백분율 또는 auto 키워드가 될 수 있습니다. 여기서 auto는 원래 크기를 나타냅니다.

아래에서는 몇 가지 예를 사용하여 background-size 속성을 사용하는 방법을 보여줍니다.

cover

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: cover;
}
</style>
</head>
<body>

<h1 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

로그인 후 복사

위 코드에서는 Lorem Picsum에서 제공한 임의의 이미지를 배경으로 사용했습니다. CSS에서는 배경 이미지를 전체 배경 영역에 걸쳐 펼치는데 그 효과는 다음과 같습니다.

CSS는 배경 크기를 설정

이미지의 높이가 늘어나지만 너비도 완전히 유지되어 배경 전체가 더 아름다워 보여요.

contain

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: contain;
}
</style>
</head>
<body>

<h1 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

로그인 후 복사

위 코드에서는 배경으로 임의의 사진도 사용합니다. CSS에서는 이미지가 늘어나지 않고 배경 영역에 최대한 중앙에 표시되도록 contain 속성을 사용합니다. 효과는 다음과 같습니다.

CSS는 배경 크기를 설정

사진 효과에서 볼 수 있듯이 사진이 배경 영역을 완전히 덮을 수는 없지만 전체 디자인이 더욱 균형 잡힌 느낌을 줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: 600px;
}
</style>
</head>
<body>

<h1 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

로그인 후 복사

위 코드에서는 임의의 이미지도 배경으로 사용합니다. CSS에서는 600px 크기의 고정값 설정을 사용하며 그 효과는 다음과 같습니다.

CSS는 배경 크기를 설정

이미지 크기가 600px로 제한되어 배경 영역 전체가 공백으로 남아 있는 것을 볼 수 있습니다. 따라서 px 값을 사용하여 배경 크기를 설정할 경우 배경 이미지의 크기가 전체 페이지와 조화를 이룰 수 있도록 특정 상황에 맞게 조정해야 합니다.

2. background-position 속성을 사용하세요

background-size 속성 외에도 background-position 속성을 사용하여 배경 위치를 설정할 수도 있습니다. 이 속성을 사용하면 배경 이미지가 해당 오프셋을 사용하여 배경 영역 내에서 수평 또는 수직 중앙에 배치될 수 있습니다. 구체적인 사용법은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://picsum.photos/id/100/800/400');
  background-size: cover;
  background-position: center;
}
</style>
</head>
<body>

<h1 id="Hello-World">Hello World!</h1>

<p>这是一段测试文本。</p>

</body>
</html>

로그인 후 복사

위 코드에서는 중심 위치를 설정했으며, 그 효과는 다음과 같습니다.

CSS는 배경 크기를 설정