单个html元素是否可以有两种背景颜色？ [复制]答案

【问题标题】：Is it possible to have two background colors for a single html element? [duplicate]单个html元素是否可以有两种背景颜色？ [复制]
【发布时间】：2018-06-12 22:28:57
【问题描述】：

我正在尝试向同一个 css 类添加 2 种不同的背景颜色。

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

是否可以为前 50%（考虑总宽度）设置一种背景颜色，为剩余部分设置另一种背景颜色？如果无法实现，谁能给我一个实现这个目标的技巧？

【问题讨论】：

使用background: linear-gradient(red, yellow);两种不同的颜色

标签： html css background background-color

【解决方案1】：

只需使用 linear-gradient 作为背景，即可轻松调整方向、颜色、每种颜色的百分比：

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

或者用pseudo-element和简单的background-color然后简单地控制pseudo-element的位置/大小来控制背景：

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}

some content

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}

some content

如果你想要更多

您可以在渐变中组合不同的颜色，也可以使用多个线性背景来实现更复杂的背景颜色划分：

body {
  margin: 0;
  background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,              
              linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

你也可以对伪元素做同样的事情，也可以使用一些 CSS 变换（旋转、倾斜等）：

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
  background: blue;
  transform: skew(30deg);
  z-index: -1;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: -50%;
  background: orange;
  transform: skew(-30deg);
  z-index: -1;
}

some content

【讨论】：

优秀的答案！但是，当我更改第一个代码中的百分比（分别为 30% 和 70%）时，两种颜色的中心都会像 this (link to CodePen) 一样模糊。您能告诉我在更改百分比时如何保持solid 属性吗？
@pr0grammar 您始终保持第二个百分比为 0，而您只更改第一个百分比
这在 IE 上工作得很好，但我怎样才能在不同的浏览器上得到这个工作？如果我将底部设置为 33%，它在其他浏览器中看起来大于 50%

【解决方案2】：

您可以为此使用背景渐变。

.stepwizard-row:before {
    background-image: linear-gradient(to right, #f00 50%, #ff0 50%)
}

检查这个小提琴： https://jsfiddle.net/Lecazndk/

您还可以创建有趣的效果并使用两种以上的颜色。

https://jsfiddle.net/Lecazndk/1/

Stripe 网站上的 hero 标头就是一个很好的例子： https://stripe.com/

【讨论】：

【解决方案3】：

您可以在 50% 高度处添加一个绝对位置伪类的位置相对 div。

例子：

.the-double-color {
  height:100vh;
  background-color:red;
  position:relative;
  width:100%;
}

.the-double-color:before {
  content:'';
  background-color:blue;
  position:absolute;
  top:0px;
  height:50%;
  width:100%;
}

这里是pen

【讨论】：