이전 브라우저 호환성을 깨지 않고 CSS에서 50% 너비 배경색을 만드는 방법은 무엇입니까?

CSS: 50% 너비의 배경색 구현

웹 디자인에서는 화면의 일부만 덮는 배경을 만듭니다. 너비의 50%는 일반적인 요구 사항입니다. 그러나 질문이 생깁니다. 이전 브라우저에서 지원하지 않는 방법을 사용하지 않고 어떻게 이를 달성할 수 있습니까? 이 기사에서는 창 너비의 50%를 차지하는 배경색을 적용하는 대체 접근 방식을 살펴봅니다.

Div를 사용한 2색 배경

배경을 지원하지 않는 IE7/8과 같은 브라우저의 경우 -size 속성을 사용하는 경우 고정 div 요소를 생성하여 해결 방법을 사용할 수 있습니다.

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

왼쪽 상단에 고정된 이 div는 화면의 절반을 배경색으로 지정하여 원하는 2색 배경 효과를 제공합니다. 필요에 따라 배경색을 조정합니다.

최신 브라우저를 위한 선형 그라데이션

이전 브라우저에 대한 지원이 문제가 되지 않으면 본문의 배경 속성에서 선형 그라데이션을 활용할 수 있습니다.

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

이 CSS는 중간 지점에서 두 색상 사이를 뚜렷하게 구분하여 한 색상에서 다른 색상으로 원활하게 전환되는 배경을 만듭니다. 또 다른.

배경 크기가 있는 여러 배경

배경 크기를 지원하는 브라우저의 경우 html 요소의 배경 색상과 본문의 배경 이미지를 결합할 수 있습니다.

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

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

이 접근 방식을 사용하면 단색이나 단색을 활용하여 창 너비의 50%를 차지하는 배경이 생성됩니다. image.

참고: 전체 화면 배경 보장

모든 예에서 html 및 본문 요소의 높이를 100%로 설정하면 페이지가 표시되는 경우에도 배경이 전체 뷰포트를 덮습니다. 내용이 더 짧습니다. 이는 전체 화면 배경 효과에 권장되는 방법입니다.

위 내용은 이전 브라우저 호환성을 깨지 않고 CSS에서 50% 너비 배경색을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!