我有一些场景，我应该在一个div中使用多个背景色。这对我来说比使用背景图像或其他div更好。但是，我找不到更简单的方法通过CSS来使用它。所以，我需要一些场景的帮助。请看图片：
（1） 我想建立一个“A”。为此，我写道：
div.A{背景：线性渐变（向右，#9c9e9f，#f6f6f6）；}
但是，在编写代码之后，它会像“B”。但是，我想完全像“A”。那么，通过css/css3，我如何做到这一点（不添加更多div）
（2） 有可能使一份比另一份小吗？例如，在“C”处，蓝色（高度）比其他部分小。如何将多个背景色应用于一个div，并使一个部分像“C”一样变小（而不向“C”添加其他div）
更新：
在@Mohammad的回答之后，我尝试过这样做。但是，对于“C”场景，我不能降低蓝色部分的高度。你能告诉我怎么做吗
jsfiddle.net/mFjQ6
A div实际上可以在没有：在之前或：在选择器之后进行，但第一次尝试使用线性渐变。唯一的区别是必须指定4个位置。深灰色从0%到50%，亮灰色从50%到100%，如下所示：
背景：线性渐变（向右，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#f6f6f6 100%）；
如你所知，B div由一个线性梯度构成，该梯度有两个位置，如下所示：
背景：线性渐变（向右，#9c9e9f0%，#f6f6f100%）；
对于C div，我使用与div A相同的梯度，如下所示：
背景：线性渐变（向右，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；
但这次我使用了带有白色背景的：after选择器，就像div的第二部分较小一样*请注意，我在下面添加了一个更好的选择。
检查此JSFIDLE或下面的代码片段，以获取完整的跨浏览器代码
div{
位置：相对位置；
宽度：80%；
高度：100px；
颜色：红色；
文本对齐：居中；
线高：100px；
边缘底部：10px；
}
.a{
背景：#9c9e9f；/*旧浏览器*/
背景：-莫兹线性梯度（左，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#f6f6f6 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（50%、#9c9e9f）、颜色停止（50%、#f6f6f6）、颜色停止（100%、#f6f6f6））；/*铬、Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#f6f6f6 50%，#f6f6f6 100%）；/*铬10+，Safari5.1+*/
背景：-o型线性梯度（左，#9C9E9F0%，#9C9E9F50%，#F6F6 50%，#F6F6 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（左，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#f6f6f6 100%）；/*IE10+*/
背景：线性梯度（向右，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#f6f6f6 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#f6f6f6'，GradientType=1）；/*IE6-9*/
}
.b{
背景：#9c9e9f；/*旧浏览器*/
背景：-moz线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（100%、#f6f6f6））；/*铬、Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；/*IE10+*/
背景：线性梯度（向右，#9c9e9f 0%，#f6f6f6 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#f6f6f6'，GradientType=1）；/*IE6-9*/
}
.c{
背景：#9c9e9f；/*旧浏览器*/
背景：-moz线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（50%、#9c9e9f）、颜色停止（50%、#33ccff）、颜色停止（100%、#33ccff））；/*铬、Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；/*IE10+*/
背景：线性梯度（向右，#9c9e9f 0%，#9c9e9f 50%，#33ccff 50%，#33ccff 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#33ccff'，GradientType=1）；/*IE6-9*/
}
c:之后{
内容：“；
位置：绝对位置；
右：0；
底部：0；
宽度：50%；
身高：20%；
背景色：白色；
}<；div class=“a”>；A</部门>；
<；div class=“b”>；B</部门>；
<；div class=“c”>；C</部门>C div还有一种替代方法，不使用白色背景来隐藏第二部分的a部分。
相反，我们使第二部分透明，并使用：after选择器作为具有所需位置和大小的彩色背景
有关此更新的解决方案，请参阅此JSFIDLE或下面的代码段
div{
位置：相对位置；
宽度：80%；
高度：100px；
颜色：红色；
文本对齐：居中；
线高：100px；
边缘底部：10px；
}
.a{
背景：#9c9e9f；
/*旧浏览器*/
背景：-莫兹线性梯度（左，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#f6f6f6 100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（50%、#9c9e9f）、颜色停止（50%、#f6f6f6）、颜色停止（100%、#F6F6））；
/*铬，Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#F6F6 50%，#F6F6 100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，#9C9E9F0%，#9C9E9F50%，#F6F6 50%，#F6F6 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，#f6f6f6 50%，#f6f6f6 100%）；
/*IE10+*/
背景：线性梯度（向右，#9C9E9F0%，#9C9E9F50%，#f6f6f6 50%，#F6F6 100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#f6f6f6'，GradientType=1）；
/*IE6-9*/
}
.b{
背景：#9c9e9f；
/*旧浏览器*/
背景：-moz线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（100%、#F6F6））；
/*铬，Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（左，#9c9e9f 0%，#f6f6f6 100%）；
/*IE10+*/
背景：线性梯度（向右，#9c9e9f0%，#f6f6f100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#f6f6f6'，GradientType=1）；
/*IE6-9*/
}
c{
背景：#9c9e9f；
/*旧浏览器*/
背景：-莫兹线性梯度（左，#9c9e9f0%，#9c9e9f50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#9c9e9f）、颜色停止（50%、#9c9e9f）、颜色停止（50%，rgba（0,0,0,0））、颜色停止（100%，rgba（0,0,0,0））；
/*铬，Safari4+*/
背景：-webkit线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，#9C9E9F0%，#9C9E9F50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（左，#9c9e9f 0%，#9c9e9f 50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）100%）；
/*IE10+*/
背景：线性梯度（向右，#9C9E9F0%，#9C9E9F50%，rgba（0,0,0,0）50%，rgba（0,0,0,0）100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#9c9e9f'，endColorstr='#ffffff 00'，GradientType=1）；
/*IE6-9*/
}
c:之后{
内容：“；
位置：绝对位置；
右：0；
排名：0；
宽度：50%；
身高：80%；
背景色：#33ccff；
z指数：-1
}<；div class=“a”>；A</部门>；
<；div class=“b”>；B</部门>；
<；div class=“c”>；C</部门>