Question

有没有办法让我有一个分色背景，所以我把页面的一半留下黑色，右半边白色。

通常我会在页面顶部和底部使用<header>和<footer>，在内部使用包装器，以使这些元素的内容居中，因此内容不是整个body的全宽。

现在谈到帖子和侧面导航等的实际内容，我希望一面是白色，一面是浅灰色。

我知道我可以在具有不同背景颜色的居中wrapper浮动内部创建两列，但仍然会在background的任一侧显示wrapper颜色。< / p>

我希望有人理解我在说什么，我不知道如何解释它或搜索什么。

我会在油漆区快速拍照并很快附上这篇文章，

非常感谢！

修改： Example picture

Answer 1

这是你可以做的：

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;
}

Answer 2

你可以试试这个

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>

分色背景（CSS＆amp; HTML）

2 个答案: