如何为一个 div 元素应用多个背景颜色

Question

我有一些情景需要在一个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

- user1896653

---

如果您不想要额外的标记，最好使用另一个容器元素，您可以使用伪元素，例如使用 :before 或 :after，但其有效性取决于您想要放置在 div 部分上的内容。 - omma2289

基本上，我有一个更复杂的场景，在那个场景中，我需要线性渐变以及:before和:after。但是，一开始我没有想到:before和:after的概念。感谢你提醒我。 - user1896653

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是由具有两个位置的线性渐变构成的，就像这样:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

对于 C div，我使用与 A div 相同类型的渐变，像这样：

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区的替代方案是不使用白色背景来隐藏第二个部分的一部分。取而代之的是，我们将第二部分设置为透明，并使用: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>

- service-paradis

Answer 2

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

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

边框的大小应该与宽度相同。

- Axel B

---

OP想要不同的高度尺寸，而不是宽度。 - omma2289

抱歉没有澄清，我的回答是针对他的问题＃1，而不是C场景。 - Axel B

如果是这种情况，那么宽度和边框应该具有相同的大小。 - omma2289

无法通过使用边框来满足我的需求。不管怎样，谢谢。 - user1896653

Answer 3

抱歉误解了您的意思，我理解您想让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>

- M a m a D

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 

- M a m a D

---

我认为你没有理解提问者的需求。 - omma2289

对我来说这没问题。但是对于"C"情况，我无法减小蓝色部分的高度。你能告诉我怎么做吗？http://jsfiddle.net/mFjQ6/ - user1896653

@user1896653 这不是像 Image B 那样不理想吗？ - omma2289

Answer 5

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

- WesJ

Answer 6

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

- Ali Raza

Answer 7

你可以这样做：-

在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 &copy;</h3>
</div>
</body>

- Anima Singh Dhabal

Answer 8

使用 :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%;
}

还有一个演示。

- GreyRoofPigeon

---

谢谢。这对我很有用。 - user1896653