CSS에서 이미지의 늘어나지 않는 효과를 얻는 방법

CSS에서는 배경 이미지의 속성을 설정하여 이미지가 늘어나지 않는 효과를 얻을 수 있습니다. 우리는 일반적으로 다음 두 가지 방법을 사용합니다.

방법 1: background-size

배경 이미지의 크기를 정의하려면 배경 이미지의 너비와 높이를 지정하거나 표지를 사용할 수 있습니다. 또는 배경 이미지 크기에 맞게 포함합니다. 커버를 사용하면 배경 이미지가 요소의 전체 너비와 높이를 채울 수 있도록 늘어나지만 변형되지는 않습니다. 포함을 사용하면 배경 이미지는 요소를 최대한 채우면서 요소 내에서 원래 크기를 유지합니다.

예를 들어, 다음 코드는 배경 이미지를 늘리지 않고 고정된 크기로 설정할 수 있습니다.

div {
  background-image: url("example.jpg");
  background-size: 300px 200px;
}

방법 2: background-position

background-position 속성을 사용하여 배경 이미지의 위치를 ​​설정합니다. 특정 픽셀 값 또는 중앙, 상단 등과 같은 상대 위치일 수 있습니다. 배경 이미지를 요소의 중앙에 배치하면 요소의 크기가 어떻게 변경되더라도 배경 이미지는 늘어나지 않습니다.

예를 들어 다음 코드는 요소 중앙에 배경 이미지를 설정합니다.

div {
  background-image: url("example.jpg");
  background-position: center center;
  background-repeat: no-repeat;
}

위의 두 가지 방법을 사용하여 CSS에서 늘어나지 않는 배경 이미지를 얻습니다. 실제 상황에 따라 자신에게 적합한 구체적인 방법을 선택할 수 있습니다.

위 내용은 CSS에서 이미지의 늘어나지 않는 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!