Question

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

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

}

前50％（考虑总宽度）和剩余的背景颜色是否可以有一种背景颜色？如果它无法实现，有人可以建议我实现这一目标吗？

Answer 1

只需使用线性渐变作为背景，您就可以轻松调整每种颜色的方向，颜色，％：

＆＃13;

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

＆＃13;

some content

＆＃13;

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

＆＃13;

some content

＆＃13;

或者使用伪元素和简单的背景颜色，然后只需控制伪元素的位置/大小来控制两个背景：

＆＃13;

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

＆＃13;

some content

＆＃13;

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

＆＃13;

some content

＆＃13;

如果你想要更多

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

＆＃13;

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

＆＃13;

some content

＆＃13;

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

＆＃13;

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

＆＃13;

some content

＆＃13;

Answer 2

您可以使用背景渐变。

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

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

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

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

这个用例的一个很好的例子是Stripe网站上的英雄标题： https://stripe.com/

Answer 3

您可以添加一个位置相对div，其绝对位置的伪类位于50％高度。

示例：

.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

单个html元素可以有两种背景颜色吗？

3 个答案:

如果你想要更多