분할 색상 배경 ​​(CSS 및 HTML)

Question

분할 색상 배경을 사용할 수있는 방법이 있나요?

보통 내가해야 할 내용이 전체 body의 전체 폭이되지 않도록 이러한 요소의 내용을 가운데 내부 전체 상단의 폭과 페이지의 바닥, 래퍼 될 것 <header> 및 <footer>.

게시물 및 사이드 탐색 등이 될 수있는 실제 콘텐츠에 관해서는 한쪽이 흰색이고 한쪽이 밝은 회색이되고 싶습니다.

가운데 두 열을 다른 배경색으로 왼쪽으로 떠도는 wrapper 내부에 만들 수 있지만 그럴 경우 wrapper의 양면에 background 색상이 표시됩니다.

나는 누군가가 내가 말하는 것에 대해 이해할 수 있기를 바랍니다. 어떻게 설명해야하는지, 무엇을 검색해야할지 모르겠습니다. ,

많은 감사를

나는 페인트에 빠른 사진을 만들 것입니다 곧이 게시물에 첨부!

편집 :Example picture

Answer 1

는이

하려고 할 수 있습니다 답장을 보내개

header, footer{ 
 
    background-color: #ff3399; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.container{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.bg{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    height: 3000px; 
 
} 
 
.bgwhite{ 
 
    background-color: white; 
 
    width: 50%; 
 
    left: 0; 
 
} 
 
.bggray{ 
 
    background-color: lightgray; 
 
    width: 50%; 
 
    right: 0; 
 
} 
 
.wrapper{ 
 
    position: relative; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
p{ 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<header>This is header</header> 
 
<div class="container"> 
 
    <div class="bg bgwhite"></div> 
 
    <div class="bg bggray"></div> 
 
    <div class="wrapper"> 
 
    <p>This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content.</p> 
 
    </div> 
 
<footer>This is footer</footer>

Answer 2

이것은 당신이 할 수있는 일 :

HTML

<div id="content"></div> 
<div id="background"></div> 

CSS

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

#content { 
    position: relative; 
    z-index: 2; 
}