在某些情况下，我应该对一个div使用多种背景颜色。对我来说，比使用背景图片或其他div更好。但是，我找不到更简单的CSS使用方式。因此，我需要某些情况的帮助。
（1）我要建立“ A”。为此，我写道：
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
但是，编写完该代码后，它将类似于“ B”。但是，我要像“ A”一样。那么，如何通过css / css3做到这一点（不增加更多的div）？
（2）是否可以使一部分比另一部分小？例如，在“ C”处，蓝色（在高度上）小于其他部分。如何在一个div上缩小一个部分，如“ C”（而不在“ C”上添加其他div），如何将多种背景色应用于一个div？
更新：@Mohammad回答后，我已经尝试过这种方式。但是，对于“C”场景，我无法降低蓝色部分的高度。你能告诉我我该怎么做吗？
A div实际上可以在没有:before或:after选择器的情况下进行，但第一次尝试使用线性渐变。唯一的区别是您必须指定4个位置。暗灰色从0到50％，亮灰色从50％到100％，如下所示：
:before
:after
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
如您所知，B div是由具有2个位置的线性渐变制成的，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
对于C div，我使用与div A相同的梯度：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
但是这一次我使用:after白色背景的选择器，就像div的第二部分较小一样。 * 请注意，我在下面添加了更好的选择。
查看此jsfiddle或以下代码段，以获取完整的跨浏览器代码。
div{ position:relative; width:80%; height:100px; color:red; text-align:center; line-height:100px; margin-bottom:10px; } .a{ background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */ } .b{ background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */ } .c{ background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */ } .c:after{ content:""; position:absolute; right:0; bottom:0; width:50%; height:20%; background-color:white; } <div class="a">A</div> <div class="b">B</div> <div class="c">C</div>
对于C div，还有一种替代方法是不使用白色背景来隐藏第二部分的一部分。而是使第二部分透明，并使用:after选择器充当具有所需位置和大小的彩色背景。
有关此更新的解决方案，请参见下面的jsfiddle或代码段。
div { position: relative; width: 80%; height: 100px; color: red; text-align: center; line-height: 100px; margin-bottom: 10px; } .a { background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1); /* IE6-9 */ } .b { background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1); /* IE6-9 */ } .c { background: #9c9e9f; /* Old browsers */ background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* IE10+ */ background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1); /* IE6-9 */ } .c:after { content: ""; position: absolute; right: 0; top: 0; width: 50%; height: 80%; background-color: #33ccff; z-index: -1 } <div class="a">A</div> <div class="b">B</div> <div class="c">C</div>
