CSS를 사용하여 전체 화면 반응형 배경 이미지를 어떻게 만들 수 있나요?

CSS를 사용하여 전체 화면 반응형 배경 이미지 만들기

웹 디자인에서 전체 화면 반응형 배경 이미지를 만들면 웹 페이지의 시각적 매력을 향상시킬 수 있습니다. 그러나 이미지가 페이지를 완전히 덮지 않는 문제가 발생하면 실망스러울 수 있습니다. 다음 예를 고려하십시오.

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}

이 코드에서는 적용 범위가 충분하지 않아 배경 이미지가 가장 오른쪽 끝에 반복됩니다. 이 문제를 해결하려면 CSS를 사용하여 솔루션을 탐색해 보겠습니다.

배경 크기 속성 사용

배경 크기 속성을 사용하면 배경 이미지의 크기를 지정할 수 있습니다. . 덮도록 설정하면 이미지가 전체 페이지를 채우도록 늘어납니다.

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') cover;
}

추가 스타일의 예

최신 브라우저에서는 다음 CSS를 사용하여 위치가 고정된 전체 화면 반응형 배경 이미지를 만들 수 있습니다.

background: url(image.jpg) fixed 50% / cover;

이 약어 표기법은 다음과 같습니다. background-image, background-attachment, background-position 및 background-size 속성을 결합하여 원하는 효과를 얻습니다.

반응형 배경 이미지의 약식 구문

CSS3를 지원하는 브라우저에서는 다음 약식 구문을 사용할 수 있습니다.

background: url(image.jpg) fixed center / cover;

이 구문은 이미지를 배경을 제자리에 고정하고 중앙에 배치한 다음 전체 페이지를 덮도록 합니다.

Safari 브라우저 참고 사항

Safari에는 배경 크기를 지정하기 위한 / 속기 관련 알려진 문제입니다. 이 버그를 방지하려면 대신 다음 구문을 사용하세요.

background: url(image.jpg) fixed 50%;
background-size: cover;

이러한 CSS 기술을 통합하면 사용자 경험을 향상하고 웹페이지를 돋보이게 만드는 놀라운 전체 화면 반응형 배경 이미지를 만들 수 있습니다.

위 내용은 CSS를 사용하여 전체 화면 반응형 배경 이미지를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!