将三行合并为一种多色

Question

目前我有三行不同的颜色。我需要使它成为一条彩色线条，从第一种颜色开始，到最后一种颜色结束。这是图片

这是样式

let container = {
        display: display,
        width: left,
        height: '3px',
        backgroundColor: item.lineColor,
        // position: 'absolute',

使用position: absolute可以生成一行，但最后一种颜色是红色。如何使它成为多色合适的线？

Answer 1

使用/child/0/ref/cc1进行游戏可以很快由于堆栈上下文而使操作变得棘手。

一种更自然的处理方法是简单地改变标记中各行的顺序：

红色（最后）行出现在其他行的顶部，因为这是浏览器自然地堆叠内容的方式。

与其按照标记z-index的顺序在标记中添加行，反而将其反转为yellow, blue, red。

这样，蓝线将覆盖红色，而黄线将覆盖蓝色，显示为三部分线。

red, blue, yellow

.container {
  height: 10px;
  background-color: #D0D0D0;
  position: relative;
}

.line3 {
  position: absolute;
  top: 3px;
  width: 66%;
  height: 4px;
  background-color: red;
}

.line2 {
  position: absolute;
  top: 3px;
  width: 50%;
  height: 4px;
  background-color: blue;
}

.line1 {
  position: absolute;
  top: 3px;
  width: 33%;
  height: 4px;
  background-color: yellow;
}

Answer 2

除了使用position: absolute之外，您还可以通过为每行分配一个stacking context值来形成z-index来显示一条彩色线。只需将较高的z-index值赋予您希望其显示在顶部的行即可。将position: absolute与z-index一起使用可以解决您的问题。

有关stacking context的参考信息，您可以访问here