CSS는 배경 크기를 설정
- 王林원래의
- 2023-05-21 12:10:077153검색
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>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>위 코드에서는 Lorem Picsum에서 제공한 임의의 이미지를 배경으로 사용했습니다. 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>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>위 코드에서는 배경으로 임의의 사진도 사용합니다. CSS에서는 이미지가 늘어나지 않고 배경 영역에 최대한 중앙에 표시되도록 contain 속성을 사용합니다. 효과는 다음과 같습니다.
사진 효과에서 볼 수 있듯이 사진이 배경 영역을 완전히 덮을 수는 없지만 전체 디자인이 더욱 균형 잡힌 느낌을 줍니다.
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>위 코드에서는 임의의 이미지도 배경으로 사용합니다. CSS에서는 600px 크기의 고정값 설정을 사용하며 그 효과는 다음과 같습니다.
이미지 크기가 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>Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>위 코드에서는 중심 위치를 설정했으며, 그 효과는 다음과 같습니다.
렌더링을 보면 알 수 있듯이 중심 정렬 위치가 중심과 일치합니다. 그림의 시각적 효과가 매우 좋습니다.
3. 요약
위는 CSS를 사용하여 배경 크기를 설정하는 방법에 대한 것입니다. 실제 개발에서는 사용자 경험과 전반적인 페이지 미학에 중점을 두는 것이 가장 중요합니다. 좋은 배경 설정을 통해 웹 페이지를 더욱 매력적으로 만들고 더 나은 디자인 효과를 얻을 수 있습니다.
위 내용은 CSS는 배경 크기를 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!