CSS를 사용하여 배경 이미지 크기를 설정하시겠습니까?

CSS를 사용하면 '배경 이미지' 속성을 사용하여 HTML 요소의 배경 이미지를 설정할 수 있습니다. 또한 배경 이미지를 추가한 후에는 크기를 설정해야 합니다.

CSS “배경 크기” 속성을 사용하여 배경 이미지의 크기를 설정할 수 있습니다.

문법

사용자는 CSS를 사용하여 아래 구문에 따라 배경 이미지의 크기를 설정할 수 있습니다.

으아아아

위 값을 사용하여 배경 이미지의 크기를 설정할 수 있습니다. 여기에서는 모든 값을 설명했습니다.

• Width Length - 배경 이미지의 너비와 높이를 설정합니다. 사용자는 너비 및 길이 값에 픽셀, 백분율 또는 rem을 사용할 수 있습니다.

• Width - 이미지의 너비만 설정하고 "자동" 높이를 설정합니다.

• Contain - 배경 이미지의 크기를 줄이지 않고 HTML 요소의 배경 이미지를 설정하는 데 사용됩니다.

• Inherit − 상위 요소의 배경 이미지에서 배경 이미지 크기를 상속합니다.

• Cover − HTML 요소에 맞는 방식으로 배경 이미지의 크기를 설정합니다.

예 1

아래 예에서는 HTML div 요소에 대한 배경 이미지를 설정했습니다. div 요소의 크기는 500 X 300입니다. background-size 속성을 사용하여 배경 이미지의 크기를 200 X 200으로 설정했습니다.

출력에서 사용자는 배경 이미지의 크기가 div 요소보다 작은 것을 확인할 수 있습니다. 또한 반복을 방지하기 위해 "background-repeat: no-repeat" CSS 속성을 사용했습니다.

으아아아

예 2

는 다음과 같이 번역됩니다.

예 2

아래 예에서는 "배경 크기: 커버" CSS 속성을 사용하여 배경 이미지의 크기를 설정합니다.

출력에서 배경 이미지가 div 요소에 맞는 것을 확인할 수 있습니다. 그러나 덮을 배경 크기를 설정하면 일부 이미지 가장자리가 잘립니다.

으아아아

예 3

의 중국어 번역은 다음과 같습니다.

예 3

아래 예에서는 "배경 크기: contian" CSS 속성을 사용하여 배경 이미지 크기를 설정합니다.

출력에서 이미지 크기를 억제하지 않고 배경 이미지를 설정하는 것을 볼 수 있습니다.

으아아아

예 4

는 다음과 같이 번역됩니다.

예 4

아래 예에서는 '배경 크기' 속성의 너비 값만 제공했습니다. '배경 크기' 속성으로 값만 사용할 때마다 높이가 자동으로 설정되고 사용자는 이를 출력에서 ​​볼 수 있습니다.

으아아아

사용자는 CSS를 사용하여 배경 이미지의 크기를 설정하는 방법을 배웠습니다. 배경 이미지를 설정하기 위해 사용자 정의 크기를 설정할 수 있습니다. 또한 배경 크기의 너비와 높이를 "자동" 값으로 설정할 수 있습니다. 사용자가 전체 HTML 요소를 배경으로 덮고 싶다면 "cover"를 background-size 속성 값으로 사용해야 합니다.

위 내용은 CSS를 사용하여 배경 이미지 크기를 설정하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!