CSS의 배경 관련 속성

background-origin: background-position 속성이 컨테이너의 어느 부분을 기준으로 배치되는지 지정합니다.

Padding-box 배경 이미지는 패딩 상자를 기준으로 배치됩니다(기본값)

Border-box 배경 이미지는

콘텐츠를 기준으로 배치됩니다. -box 배경 이미지는 콘텐츠 상자를 기준으로 배치됩니다.

background-position: 컨테이너에 표시되는 배경 이미지의 시작 위치를 설정합니다.

기본값: 0 0(배경 이미지의 왼쪽 상단부터 표시)

값: Int px Int px는 배경 이미지의 왼쪽 상단 고정점입니다. 컨테이너의 위치(음수 값일 수 있음) 음수 값은 배경 이미지의 왼쪽 상단 지점이 컨테이너 내에 있지 않고 그 너머 부분이 숨겨져 있음을 의미합니다.

하나의 값만 설정하면 다른 값은 "centered"(50%/center)

%를 사용하는 경우 좌표는 다음 공식에 따라 계산됩니다 :

　x: (컨테이너 너비 - 배경 이미지 너비) * x 백분율, 초과된 부분은 숨겨집니다. y (컨테이너 높이 - 배경 이미지 높이) * y 백분율 , 초과된 부분은 숨겨집니다.

따라서 왼쪽/상단은 0%, 오른쪽/하단은 100%(배경 이미지의 오른쪽/하단 가장자리가 컨테이너와 일치), 중앙은 50%(배경 이미지)에 해당합니다. 이미지는 컨테이너 중앙에 있습니다).

배경 크기:배경 이미지의 크기를 설정합니다(IE8은 이 속성을 지원하지 않습니다)

퍼센트/길이: 백분율인 경우 배경 이미지의 크기 배경 이미지에 컨테이너 백분율을 곱합니다. 하나만 설정하고 두 번째는 자동으로 설정합니다(원본 배경 이미지와 동일한 화면 비율을 유지하기 위해).

둘 다 100%로 설정하면 배경 이미지가 컨테이너를 채우지만 가로 세로 비율이 변경됩니다.

contain: 컨테이너에는 배경 이미지의 고정된 비율에 따라 전체 배경 이미지가 포함됩니다. 배경 이미지의 크기는 배경 이미지의 고정된 비율에 따라 확대됩니다. 한 쪽이 컨테이너의 경계에 도달할 때까지 다른 쪽은 비어 있는 경우가 많습니다(반복이 없는 경우).

표지: 배경 이미지가 전체 컨테이너를 채울 때까지 고정된 가로세로 비율에 따라 확대됩니다(배경 이미지의 짧은 쪽도 컨테이너 경계에 도달함). 배경 이미지의 일부가 컨테이너를 초과하여 잘립니다.

IE8 호환:

필터: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='absolute path',sizingMethod='scale/crop');

자르기: 배경 이미지의 크기는 그대로 유지되며, 영역 크기에 맞게 이미지가 잘립니다.

　이미지: 기본값입니다. 배경 이미지의 크기에 맞게 영역의 크기 경계를 늘리거나 줄입니다. 이는 오버플로: 표시 효과와 동일합니다.

크기 조정: 영역의 크기 경계에 맞게 배경 이미지의 크기를 조정합니다.

　①어떤 크기의 배경 비율도 지정할 수 없습니다. ②단일 그림에만 적합하며 그림 스프라이트 및 기타 퍼즐은 사용할 수 없습니다. ③절대 경로 그림을 참조해야 합니다. ④ie7, 8과 호환 가능

위 내용은 CSS의 배경 관련 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!