如何在 div 中设置 2 种背景颜色答案

【问题标题】：How can I set 2 background colors in a div如何在 div 中设置 2 种背景颜色
【发布时间】：2025-11-28 13:55:01
【问题描述】：

我需要一些帮助来设置50% of the div 是颜色蓝色而另一个50% of the div 是颜色红色，水平。我怎样才能做到这一点？谢谢！

【问题讨论】：

有很多方法可以做到这一点，并且（取决于浏览器支持要求）最好使用带有硬停止的渐变，如this answer。您只需要两种颜色并在 50% 处停止。
是否可以使用两个 div？

标签： html css

【解决方案1】：

可能已经结束了，但这里是http://jsfiddle.net/e9ypqy5t/6/

.repeat {
  width: 100px;
  height: 100px;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50px,
      red 50px,
      red 100px 
    );
}

这是使用百分比的示例http://jsfiddle.net/e9ypqy5t/8/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50%,
      red 50%,
      red 100%
    );
}

此方法还允许您添加更多的颜色线，如下所示：http://jsfiddle.net/e9ypqy5t/10/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 10%,
      red 10%,
      red 20%
    );
}

【讨论】：

谢谢回复，但是在div里面添加内容有问题。当我在 div 中放置一些文本时，文本会重叠。

【解决方案2】：

我猜在这种情况下这可能对你有用：

#divname {
 background:linear-gradient(#ff0000,#0000ff);
}

【讨论】：

不，这不是我想要的。

【解决方案3】：

使用:after伪选择器的纯css解决方案：http://jsfiddle.net/eLwdbgat/

div {
    width: 80%;
    height: 300px;
    background-color: red;
}

div::after {
    content:'';
    position: fixed;
    height: 300px;
    width: 40%;
    left: 40%;
    background: lightgrey;
}

【讨论】：

文本也重叠在这个div中。

【解决方案4】：

您可能想要一个“渐变”。这是代码。

.box {
  height: 200px;
  width: 200px;
  /* fallback */
  background-color: #1a82f7;

  /* Safari, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox*/
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera*/
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

&lt;div class='box'&gt;&lt;/div&gt;

【讨论】：

不，这不是我想要的。请仔细阅读我的问题。