CSS를 사용하여 배경 이미지를 반응형으로 만들려면 어떻게 해야 합니까?

CSS를 사용하여 반응형 배경 이미지 구현

웹 디자인에서는 다양한 화면 크기에 동적으로 적응하는 배경 이미지를 갖는 것이 바람직한 경우가 많습니다. 이를 달성하려면 이미지의 너비를 사용 가능한 공간에 맞추고 가로 세로 비율을 유지하고 이에 비례하여 높이를 조정해야 합니다.

background-size:cover;

이를 달성하기 위해 CSS3는

배경 크기 속성을 ​​제공합니다. 특히 cover로 설정하면 배경 이미지의 크기가 비율을 유지하면서 사용 가능한 전체 공간을 채우도록 조정됩니다. 이미지는 필요한 경우 세로로 잘려 가로 반복 없이 세로 스크롤이 가능합니다.

이를 보여주는 예제 코드는 다음과 같습니다.

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

포함 및 표지의 차이점

포함: 측면을 유지하면서 배경 위치 영역에 완전히 맞도록 이미지 크기를 조정합니다. 비율. 이로 인해 이미지 주변에 빈 공간이 생길 수 있습니다.

표지: 가로 세로 비율을 유지하면서 전체 배경 위치 지정 영역을 덮도록 이미지 크기를 조정합니다. 이로 인해 이미지가 맞게 잘릴 수 있습니다.

시각적 영향 이해하기

16x9 화면의 배경으로 사용되는 4x3 해상도의 이미지를 생각해 보세요.

포함: 이미지가 화면에 맞지만 어느 쪽에도 빈 공간이 남아 있습니다. 측면.

표지: 이미지가 화면 전체를 덮고 있지만 상단과 하단의 일부가 잘립니다.

이 차이점을 설명하기 위해 다음 데모를 보여드립니다.

<div class="contain">
    <!-- Background image will fit, leaving empty space -->
</div>
<div class="cover">
    <!-- Background image will cover, cropping as needed -->
</div>

위 내용은 CSS를 사용하여 배경 이미지를 반응형으로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!