웹 개발에서 때로는 다른 기능을 제공하는 반으로 분할된 배경을 만들어야 하는 경우가 있습니다. 반대편의 색상. 전통적으로 이 효과는
태그를 추가하고배경을 분할하는 한 가지 접근 방식은 배경 크기 속성을 사용하는 것입니다. 배경 이미지의 크기입니다. 이 코드 조각은 이 방법을 예시합니다:
body {
background: #fff;
}
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}그러나 Internet Explorer 7/8과의 호환성이 필요한 프로젝트에는 이 솔루션이 실행 가능하지 않습니다. 해당 브라우저는 배경 크기 속성을 지원하지 않기 때문입니다.
이전 브라우저의 경우 대체 접근 방식은 별도의 Div 요소를 만드는 것입니다.
#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
