一个html元素可能有两种背景颜色吗？

Question

我正在尝试将2种不同的背景色添加到同一CSS类中。

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

}

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

Answer 1

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

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

或使用 伪元素 和简单的 背景颜色， 然后简单地控制伪元素的位置/大小即可控制两个背景：

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