Question

我有一些情况，我应该使用多个背景颜色到一个div。这对我来说更好，而不是使用背景图像或额外的div。但是，我无法通过CSS找到更简单的方法来使用它。所以，我需要一些方案的帮助。请看图片：

（1）我想建立“A”。为此，我写道：

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

但是，在编写该代码后，它会像“B”一样。但是，我想要完全像“A”。那么，通过css / css3我该怎么做（不添加更多的div）？

（2）是否可以使一部分小于其他部分？例如，在“C”处，蓝色比其他部分小（高度）。如何，我可以将多个背景颜色应用于一个div，使一部分变小，如“C”（不添加额外的div到“C”）？

更新：在@ Mohammad的回答之后，我试过这种方式。但是，对于“C”场景，我无法降低蓝色部分的高度。你能告诉我，我该怎么办？
jsfiddle.net/mFjQ6

Answer 1

实际上可以在没有:before或:after选择器的情况下制作A div，但首次尝试使用线性渐变。唯一的区别是你必须指定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相同类型的渐变：ike这个：

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>

Answer 2

很抱歉误解，据我所知，你希望你的DIV有三种不同颜色的不同颜色。这是我的代码的输出：

output ，

如果这是您想要的，请尝试以下代码：

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>

Answer 3

您可以应用背景颜色和边框使其看起来像2种颜色。

div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }

边框应与宽度相同。

Answer 4

它与所有浏览器兼容，更改值以适合您的应用程序

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

Answer 5

使用：after和：在你能做到之前。

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

和demo。

Answer 6

您可以使用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）。

Answer 7

background: linear-gradient(152deg , #0A64B1 60%,#0A64B1 33%,#2C3E52 45%,#2C3E52 156%);

如何将多种背景颜色应用于一个div

7 个答案: