CSS 배경 크기 및 배경 위치를 사용하는 방법

반응 형 레이아웃을 쉽게 만들기 위해 CSS 배경 이미지 크기와 위치의 기술을 마스터하십시오! 이 기사는 배경 이미지의 크기와 위치를 유연하게 제어하는 ​​데 도움이되는 및

속성을 ​​깊이 탐색합니다. background-size background-position

코어 포인트 :

속성은 배경 이미지 크기를 조정하는 데 사용되며 및 와 같은 키워드뿐만 아니라 픽셀, EM 및 백분율과 같은 숫자 단위를 지원합니다. 속성은 컨테이너의 배경 이미지의 위치를 ​​제어하고

에서 가장 잘 작동합니다.

• 키워드 (상단, 하단, 왼쪽, 오른쪽, 중앙), 길이 값 (PX, EM) 또는 백분율 값을 사용하여 정확한 이미지 위치를 달성 할 수 있습니다. background-size cover contain와
의 조합은 컨테이너 크기 변화를 처리하기 위해 반응 형 레이아웃에 특히 적합합니다.
• background-position background-size: cover 실용 운동 :
우리는 시연에 Oia, Santorini (400px x 600px)의 사진을 사용합니다.
• background-position
이 예에서는 300px x 200px
• 가 중앙에 있습니다. 노란색 배경이 있고 배경 이미지는 노란색 배경 위에 있습니다. background-size 배경 이미지를 직접 추가하면 이미지 크기가 background-position보다 크기 때문에 이미지의 일부만 표시됩니다.

속성은이 문제를 해결하는 데 도움이됩니다. 사용

배경 크기를 설정하십시오 :

속성은 숫자 단위 (px, em, %) 및 를 제공합니다.

<div> : 이미지가 완전히 표시되지만 컨테이너로 채워지지 않을 수 있습니다. <code><div> <p> <code><div> : 이미지는 컨테이너로 가득 차 있지만 일부 이미지는 잘릴 수 있습니다. <p> <img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "> </p> <p> 기타 값 : 이미지 크기를 설정하기 위해 백분율 또는 픽셀 값을 사용하지만 이미지 변형을 피하기 위해주의하십시오. <code>background-size

사용 배경 이미지 위치를 설정하십시오 : background-size 기본적으로 배경 이미지의 왼쪽 상단 모서리는 컨테이너의 왼쪽 상단에 있습니다.

속성을 ​​사용하면 이미지 위치를 정확하게 제어 할 수 있습니다.

• <: :> 키워드 : 키워드 조합 및 , , , 및 기타 키워드를 사용하여 키워드 조합을 사용합니다. top bottom left 길이 값 : 이미지 위치를 미세 조정하기 위해 픽셀, EM 및 기타 길이 값을 사용하십시오. right center % 값 : 위치에 백분율 값을 사용하면 컨테이너와 관련하여 비례 관계를 이해해야합니다.
요약 :

• 및

  속성은 CSS의 강력한 도구이며, 특히 반응 형 레이아웃을 만들 때 유용합니다. 이 두 속성을 유연하게 사용하면 다양한 배경 이미지 효과를 쉽게 달성 할 수 있습니다.

  자세한 내용은 MDN 문서를 참조하십시오 : 및 . 또한 인라인 이미지에도 적합한 및 특성을 배우는 것이 좋습니다.

faqs :

페이지 오른쪽 하단 모서리에 배경 이미지를 찾는 방법은 무엇입니까? 를 사용하십시오. 백분율을 사용하여 배경 이미지를 배치 할 수 있습니까? 예, 백분율 값을 허용합니다. 배경 이미지가 전체 요소를 커버하는 방법은 무엇입니까? 를 사용하십시오.

background-size와 의 차이? 컨테이너를 채우십시오. background-position CSS는 여러 배경 이미지를 지원합니까? 쉼표로 구분되는 지원.

이 기사가 CSS 배경 이미지 크기 및 위치 속성을 더 잘 이해하고 적용하는 데 도움이되기를 바랍니다! background-size