CSS를 사용하여 배경 이미지를 정확하게 중앙에 배치하려면 어떻게 해야 합니까?

CSS를 사용하여 배경 이미지를 정확하게 중앙에 배치

배경 이미지를 중앙에 정렬하기 위해 다음 CSS 코드를 사용했습니다.

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

코드가 실제로 전체 페이지에 걸쳐 이미지를 타일링하는 동안 결과는 이미지의 윗부분이 가려졌습니다. 목표는 완벽한 센터링을 달성하고 21인치 화면에서도 완전한 가시성을 유지하는 것입니다.

이러한 정확한 정렬을 달성하려면 CSS를 다음과 같이 조정하는 것이 좋습니다.

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

이 수정 배경 위치를 수평 및 수직 모두에서 화면 중앙으로 명시적으로 설정합니다.

또는 이미지에 대한 div 컨테이너를 생성하고 z-index를 사용하여 배경으로 설정하면 센터링 프로세스가 단순화됩니다.

또 다른 접근 방식은 배경 위치 속성에 픽셀 값을 사용하는 것입니다.

background-position: 0 100px; /*use a pixel value that will center it*/

또는 몸체의 최소 높이가 100으로 정의된 경우 %, 50%는 센터링에 사용할 수 있습니다.

body{
    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

이러한 조정을 구현하여 쉽게 센터링을 할 수 있습니다. 정밀한 배경 이미지를 제공합니다.

위 내용은 CSS를 사용하여 배경 이미지를 정확하게 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!