배경 관련 속성에 대한 자세한 소개

배경 원본: 배경 위치 속성 이 컨테이너의 어느 부분을 기준으로 배치되는지 지정합니다.

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

　b order-box 배경 이미지는 테두리 상자를 기준으로 배치됩니다.

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

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

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

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

하나의 값만 설정하면 다른 값은 "중앙에" 배치됩니다(50%/중심)

백분율을 사용하는 경우 좌표는 다음과 같이 계산됩니다.

x (컨테이너 너비 - 배경 너비 그림 ) * x 백분율, 초과 부분이 숨겨집니다. y: (컨테이너 높이 - 배경 이미지 높이) * y 백분율, 초과 부분; 부분이 숨겨져 있습니다.

따라서 left/top은 0%에 해당하고, right/bottom은 100%에 해당합니다(배경) 이미지의 오른쪽/아래쪽 가장자리가 컨테이너와 일치함), 가운데는 50%에 해당합니다(배경 이미지가 컨테이너의 중앙에 있음).

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

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

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

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

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

IE8 호환:

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

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

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

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

　①모든 크기의 배경 비율을 지정할 수 없습니다. ②단일 그림에만 적합하며 그림 스프라이트와 같은 퍼즐은 사용할 수 없습니다. ③절대 경로 이미지를 참조해야 합니다. ④ie7, 8과 호환됩니다

이상 모두 개인적인 이해를 바탕으로 작성되었습니다. 오류가 있는 경우 메시지를 남겨 수정해 주시기 바랍니다.

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