소개

background-size 속성을 사용하여 배경 이미지의 크기를 결정할 수 있습니다. 이미지를 왼쪽으로 늘리고 사용 가능한 공간에 맞게 만들 수 있습니다. background-size 속성을 구현하기 위한 구문이 너무 많습니다. 값과 단위 값을 사용하여 배경 크기 속성의 속성을 설정할 수 있습니다.

단위 값에서는 백분율이나 픽셀 형식으로 배경 크기 속성을 정의할 수 있습니다. 우리는 글로벌 가치의 도움으로 이를 정의할 수도 있습니다. 아래 스니펫의 도움을 통해 글로벌 가치의 도움으로 이를 구현할 수 있습니다.

자바스크립트 경고 상자

 .card-hero inherit 

주제를 간단히 이해해 봅시다.

키워드 값

Cover and Contain의 도움으로 키워드 값을 사용할 수 있습니다. 이러한 키워드 값을 사용하여 배경 크기를 변경할 수 있습니다.

1. 표지:

Cover 키워드를 사용하여 배경 크기를 설정할 수 있습니다. 배경 크기를 표지로 정의하면 이미지가 공간을 남기지 않고 컨테이너에 맞습니다. 또한 화면에 맞게 이미지를 향상시킵니다.

아래 예를 통해 이를 이해해 보겠습니다.

Java 메소드의 문자열

예시 1:

암호:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

산출

설명:

위 코드에서는 background-image 속성을 사용하여 3개의 배경 이미지를 결합합니다. background-size 속성은 각 배경 이미지의 크기를 지정합니다. 첫 번째 이미지의 너비는 30%, 두 번째 이미지의 너비는 40%, 세 번째 이미지의 표지입니다. 균형 잡힌 구도를 만들기 위해 배경 위치 속성을 이미지마다 다르게 설정합니다.