我有一些场景，我应该对一个 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）？
更新：在@Mohammad 的回答之后，我尝试过这种方式。但是，对于“C”场景，我不能降低蓝色部分的高度。你能告诉我我该怎么做吗？
jsfiddle.net/mFjQ6
A div 实际上可以在没有:before或:after选择器的情况下制作，但首先尝试使用线性渐变。唯一的区别是您必须指定 4 个位置。深灰色从 0 到 50%，浅灰色从 50% 到 100%，如下所示：
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 还有一种替代方法，它不使用白色背景来隐藏第二部分的 a 部分。相反，我们使第二部分透明，并使用: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>抱歉造成误解，据我了解，您希望您的 DIV 具有不同高度的三种不同颜色。这是我的代码的输出：
,
如果这是您想要的，请尝试以下代码：
div {
height: 100px;
width:400px;
position: relative;
}
.c {
background: blue; /* Old browsers */
}
.c:after{
content: '';
position: absolute;
width:20%;
left:0;
height:110%;
background: yellow;
}
.c:before{
content: '';
position: absolute;
width:40%;
left:60%;
height:140%;
background: green;
}<div class="c"></div>您可以同时应用背景颜色和边框，使其看起来像 2 种颜色。
div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }
边框的大小应与宽度相同。
它与所有浏览器兼容，更改值以适合您的应用程序
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
使用 :after 和 :before 你可以做到这一点。
HTML：
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
CSS：
div {
height: 100px;
position: relative;
}
.a {
background: #9C9E9F;
}
.b {
background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
content: '';
width: 50%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a:after {
background: #f6f6f6;
}
.c:before {
background: #9c9e9f;
left: 0;
}
.c:after {
background: #33CCFF;
right: 0;
height: 80%;
}
和一个演示。
您可以使用 CSS 多背景创建类似 c 的内容。
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
请注意，您仍然必须对背景类型使用线性渐变，因为 CSS 不允许您控制单个颜色层的背景大小。所以这里我们只做一个单色渐变。然后，您可以独立控制每个颜色块的大小/位置。您还必须确保它们不会重复，否则它们只会扩大并覆盖整个图像。
这里最棘手的部分是背景位置。0% 的背景位置将元素的左边缘放在左侧。100% 把它的右边缘放在右边。50% 的中心是中间的。
对于一个有趣的数学来解决这个问题，您可以猜测变换可能是线性的，并且只需求解两个小斜率截距方程。
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
因此，为了将 40% 宽的 div 定位在距左侧 60% 的位置，我们将其设置为 60% * 100 / (100 - 40)（或使用 css-calc）。
background: linear-gradient(152deg , #0A64B1 60%,#0A64B1 33%,#2C3E52 45%,#2C3E52 156%);
你可以这样做： -
在 CSS 文件中：-
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
}
.split {
height: 100vh;
width: 50%;
top: 0;
}
.left {
background-color: lightblue;
left: 0;
}
.left h1 {
text-align: center;
margin-top: 20%;
font-size: 90px;
}
.right {
background-color: lightsalmon;
right: 0;
}
.footer {
background-color: black;
color: white;
font-size: 13px;
padding: 1px;
}
</style>
在体内：-
<body>
<div class="container">
<div class="split left">
<h1>Welcome<br>to<br>website</h1>
</div>
<div class="split right">
<h2>welcome<br>to<br>website</h2>
</div>
</div>
<div class="footer">
<h3>copyright ©</h3>
</div>
</body>