CSS에서 창 너비의 50% 배경색 분할을 만드는 방법은 무엇입니까?

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

이 고정 div는 페이지가 스크롤되는 동안 고정된 상태로 유지되어 원하는 분할 배경 효과를 생성합니다.

최신 브라우저 옵션

의 경우 최신 브라우저를 지원하는 프로젝트에는 추가 기술을 사용할 수 있습니다:

선형 그라데이션:

선형 그라데이션은 배경을 쉽게 분할할 수 있는 방법을 제공합니다. 의 배경 속성에 선형 그라데이션을 사용하면 각 색상에 대해 50%의 하드 컷오프를 만들 수 있습니다.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

배경 크기가 있는 여러 배경:

이 방법은 배경색을 요소를 사용한 다음 배경 크기가 페이지 너비의 50%로 설정된 배경 이미지:

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

추가 참고

배경이 전체 뷰포트를 덮도록 하려면 두 높이를 모두 설정하는 것이 좋습니다. 및 요소를 100%로 설정합니다. 이렇게 하면 페이지 콘텐츠가 더 짧더라도 배경이 사용자의 뷰포트까지 확장됩니다.

위 내용은 CSS에서 창 너비의 50% 배경색 분할을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!