CSS에서 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?

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

웹 페이지의 전체 화면 배경으로 이미지를 설정하려는 과정에서 문제가 발생했습니다. 페이지를 완전히 덮지 않고 가장 오른쪽 끝에서 반복됩니다. CSS 기술을 사용하여 이 문제를 해결할 수 있는 방법은 다음과 같습니다.

해결책 1: 표지 방법

배경 크기 속성을 사용하여 배경 이미지의 크기를 제어할 수 있습니다. 이 경우 값 표지를 사용하면 이미지를 늘려서 페이지에 맞게 자르더라도 이미지가 전체 페이지를 덮게 됩니다.

background-size: cover;

이미지가 가로와 세로 모두 중앙에 오도록 하려면, 50% 50% 값으로 background-position 속성을 사용할 수 있습니다.

background-position: 50% 50%;

해결책 2: 수정됨 첨부

배경 이미지가 페이지 콘텐츠와 함께 스크롤되는 것을 방지하려면 background-attachment 속성을 고정으로 설정하면 됩니다. 이렇게 하면 이미지가 제자리에 고정되어 페이지가 그 뒤로 스크롤될 수 있습니다.

background-attachment: fixed;

약식 구문

다음 구문을 사용하여 두 솔루션의 약식 버전을 작성할 수 있습니다.

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

여기서 /는 배경 위치와 배경 크기 속성을 구분합니다.

Safari 호환성

Safari에는 위에서 설명한 단축 구문에 버그가 있습니다. Safari에서 사용하려면 다음과 같이 속성을 분리해야 합니다.

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

이러한 기술을 구현하면 배경 이미지가 이제 페이지를 완전히 덮고 중앙에 유지되어 시각적으로 매력적이고 반응이 빠른 배경을 제공합니다. 웹사이트.

위 내용은 CSS에서 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!