CSS 背景色填充中间区域是网页设计中常见的一种设计方式。下面我们来看一些实现该效果的方法。

首先，我们可以使用 CSS 线性渐变来实现背景色填充。代码如下：
background-image: linear-gradient(to bottom, #008080, #00ff00);
其中，to bottom 表示从顶部开始，#008080 是背景起始颜色，#00ff00 是背景结束颜色。通过这个方法，我们可以实现从上到下的渐变色填充。
其次，我们可以使用 CSS 边框和背景来实现填充效果。代码如下：
background-color: #008080;
border-top: 50px solid #00ff00;
border-bottom: 50px solid #00ff00;
其中，background-color 表示背景色，border-top 和 border-bottom 分别表示顶部和底部填充效果。50px 表示边框的宽度，#00ff00 表示填充色。
最后，我们也可以使用伪元素 ::before 和 ::after 来实现效果。代码如下：
.content {
position: relative;
background-color: #008080;
}
.content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #00ff00;
}
.content::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: #00ff00;
}
其中，content 表示元素的内容，position 表示元素的定位方式，top 和 left 表示元素的上下和左右位置，width 和 height 表示元素的宽度和高度，background-color 表示元素的背景色。

以上是 CSS 背景色填充中间区域的三种方法，通过学习并灵活运用，可以让我们的网页效果更加美观。